How to Create a Responsive Like Button in ReactJS?

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;

Output: Final Output will look something like this. Open http://localhost:3000/ in browser: