How to Create a Responsive Like Button in ReactJS?

Last Updated : 09 Oct, 2020

React is a JavaScript library used to develop interactive user interfaces. We will be making a Like feature using React JS.
Modules required:

npm
React
Font Awesome

npm install --save @fortawesome/react-fontawesome

Basic setup: Start a project by the following command:

NPX: It is a package runner tool that comes with npm 5.2+, npx is easy to use CLI tools. The npx is used for executing Node packages. It greatly simplifies a number of things one of which is checked/run a node package quickly without installing it locally or globally.

npx create-react-app like-app

Now go to the folder

cd like-app

Start the server- Start the server by typing the following command in terminal:

npm start

Now create a directory inside src with a file name – Like.js

mkdir components && cd components && touch Like.js

The directory structure will look similar to this:

Edit Like.js as following.

Like.js: The following are the imports for the required like feature app. The 2nd import denotes the famous icon library – “Font-Awesome” Library.

Javascript

import React, { Component } from "react"; 
import { faHeart } from "@fortawesome/free-solid-svg-icons"; 
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons"; 
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

Like.js: Now let’s define the state of our component. It contains one variable called liked. If it’s false then we will render a blank heart, however, if it’s true we will render a solid heart.
Javascript
state = { liked: false };
Like.js: The toggle(): This function is the core of the component which does the state change when the heart is clicked. It toggles the state of the heart between empty and solid.
Javascript
toggle = () => {

    let localLiked = this.state.liked;

    localLiked = !localLiked;

    this.setState({ liked: localLiked });

  };

Like.js: This is the main render function that returns the HTML of the component. Carefully observe how we have used conditional rendering to render different hearts based on the state of the liked variable.

Javascript

render() { 
    return ( 
      <div className="container"> 
        <center> 
            
<p>Click on the Like Button</p> 
  
          <div 
            className="container"
            style={{ border: "1px solid black", width: "15%" }} 
            onClick={() => this.toggle()} 
          > 
            {this.state.liked === false ? ( 
              <FontAwesomeIcon icon={faHeart} /> 
            ) : ( 
              <FontAwesomeIcon icon={faHeartBroken} /> 
            )} 
          </div> 
        </center> 
      </div> 
    ); 
  }

Like.js: Final Code of the component which can be exported and used inside any other component.

Javascript

import React, { Component } from "react"; 
import { faHeart } from "@fortawesome/free-solid-svg-icons"; 
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons"; 
  
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; 
class Like extends Component { 
  state = { liked: false }; 
  toggle = () => { 
    let localLiked = this.state.liked; 
  
    // Toggle the state variable liked 
    localLiked = !localLiked; 
    this.setState({ liked: localLiked }); 
  }; 
  render() { 
    return ( 
      <div className="container"> 
        <center> 
          <p>Click on the Like Button</p> 
          <div 
            className="container"
            style={{ border: "1px solid black", width: "15%" }} 
            onClick={() => this.toggle()} 
          > 
            {this.state.liked === false ? ( 
              <FontAwesomeIcon icon={faHeart} /> 
            ) : ( 
              <FontAwesomeIcon icon={faHeartBroken} /> 
            )} 
          </div> 
        </center> 
      </div> 
    ); 
  } 
} 
  
export default Like; 