My Final Button Challenge

This week I was challenged to add a new component to my Pixelgram app, a simple “Like” button. I say simple because for this button I don’t need to send my data to my backend. Easy right? Well I thought so too but then I ran into a few problems.

My initial thought process…

At first I just wanted to get my button onto my page for each of my posts so I added it to my ‘postList’ component. This component is where I’m going through all of my posts using “map ”then displaying it to my page. Once I added my “like ”button to each of my posts, I started working on my logic. First, I added my state to the top of the component and set my “likes” to a default integer of 0. Next I created a simple “handleClick ” arrow function which takes my state and adds +1 to it. Lastly I added my new function to my button with an “onClick ” event so that when my user clicks on it, it will add 1 to my total likes.

With the code above, I thought I had finished the simple code challenge but upon further examination of my webpage I noticed a very annoying problem.

When I clicked the like button for a single post, it changed the value for ALL of my post’s buttons (That’s not what I wanted). I realized that this was happening because my button wasn’t exclusive to just one post but it was the SAME button sharing the SAME “state ”for each of my posts. So whenever I updated the state for one button, it changed the state for ALL of my buttons. In order to fix this problem I decided to take my button and convert it into it’s own separate component so that I can use it for each of my posts and set the state independent of the others.

Making my Liker Component…

Now it’s time to make my component! It’s nothing fancy but this time I decided to make it a functional component instead of a class so that I could use the “useState” hook to mange my state. I choose this way because I personally think it’s an easier way to mange state, it’s cleaner and more legible. After importing my hook I created a constant for my initial likes (initLikes) and to set my initial likes (setInitLikes) then I set my default value to 0. After that I just copied my previous handleClick function and the button I created earlier and pasted it into my component. The code below is what it ended up looking like.

With the “Liker” component done I went back into my “PostList ” component and deleted the button, state and function I had before. Now all I need to do is import Liker from ‘./Liker’ and add the component to my postList function.

It works now and this is what it looks like…

With my new Liker component I am able to change the state for each button independently of the other’s! Perfect! But let’s add a little bit more.

Now lets add a counter…

So now that we have the the “like ”button working for each of our posts, lets add a counter to it so we can choose how many likes we want to add or subtract from each post. To do this I’m going to make a new component named “CounterInput” and pass in our value as a prop to our “Liker” component. For this, we aren’t going to do anything too new. I’m still going to be using the “useState” hook to set our state, but instead of a button, this time we’re going to make an input field with a type of “number”. We’re going to set a default value of 0 and our new value with an “onChange” event. Lastly we’re going to connect our two components by passing in our “likesCount” value to our “Liker ”component as a prop. With our “CounterInput ” set up we only need to make minor changes to our “Liker” component. First we are going to make a new constant and set our likes equal to props (this prop comes from our CounterInput). Then all that’s left to do is change our “+1” to “likes” and we’re finished! Our two components should look like the code below.

Now that we have both our components done and connected we can replace our old “Liker” component with the new “CounterInput” component like so.

And TADA! We have a working counter input where we can now change the amount of likes by whatever increment we want either adding likes or subtracting likes. Below is the final product.