Create a Basic Like Button in React

Create a Basic Like Button in ReactMariel WesterveltBlockedUnblockFollowFollowingJan 31In today’s social feed-centric culture, “likes” have become a well-known term, and have also taken many forms over the past decade of existence.

There are Facebook likes, Instagram likes, Twitter likes, YouTube likes, Reddit upvotes, Google +1’s, and not to mention Medium claps.

Facebook’s like button is coming up on it’s 10 year birthday after being released February 9, 2009, and though likes are only about 10 years old, I don’t think they are going anywhere.

To create a basic like button in vanilla Javascript, you have to do a considerable amount of work.

You have to: 1) find or create the element that you want the like count to live in, probably in a span or button, 2) create a variable for that element, 3) attach an event listener onto that element with a callback function, 4) define your callback function.

5) figure out how to increment likes inside that function and render that new count to the page…zzzz.

Note that this isn’t even addressing persistence in your database.

All that seems like a lot of code just for one measly like button, right?.In React, we can make use of state to manipulate likes a lot easier.

Setting up your ButtonImagine you have some sort of Instagram-esque photo feed that you want to add likes to.

Oh and also you’re working for Adele.

Adele needs to see her likes when users click the like button.

HELLO FROM THE OTHER SIIIIIIIIIIIIDEWe need to first set our state to have a default count of zero.

Then, in your button or wherever you are rendering your likes, simply add this.

state.

count.

This refers to my App class, looks into it’s current state for a key called count and gives us the value, which was set to 0 by default.

Adding an Event ListenerAt this point, there is a button on the page, but no matter how many times you click it, it will stay at zero.

And Adele isn’t happy about this.

Adele deserves to see her photo likes.

She didn’t win those 15 Grammys for nothing, so let’s get the likes to show.

In this example, it makes sense to add our event onto the button itself, using onClick and setting that up with a callback function.

Sometimes when writing callback functions, it helps to console.

log a phrase to test that the event is hitting the right callback, so here’s what I have now:When you test this code and click your like button, you should see the message “give Adele some likes” in your console.

If so, that means it’s working!.Woo!.Now just to make it increase the count everytime it’s clicked.

Increment the LikesRemember when we talked about state earlier?.It’s currently stuck at 0 and we need to find a way to change it.

That’s where setState comes in.

We get the current state withthis.

state.

count and add one.

Set that to a new variable and then use that variable in your setState, which needs to be an object inside of {} brackets.

incrementMe = () => { let newCount = this.

state.

count + 1 this.

setState({ count: newCount }) }Adding these couple lines of code now gives us a working like button!Adele is pleased.

That is essentially it for setting up a basic like button in React!.Obviously this can quickly become more complex with different child-parent relationships, having to pass props/lift state, etc.

Also this isn’t addressing persistence on the back-end at all, but hey, one step at a time.

.. More details

Leave a Reply