Skip to content
Related Articles

Related Articles

How to Create a Responsive Like Button in ReactJS?
  • Difficulty Level : Expert
  • 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 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:

My Personal Notes arrow_drop_up
Recommended Articles
Page :