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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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";

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    state = { liked: false };

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    toggle = () => {
        let localLiked = this.state.liked;
        localLiked = !localLiked;
        this.setState({ liked: localLiked });
      };

    chevron_right

    
    

  • 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

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    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>
        );
      }

    chevron_right

    
    

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

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


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

react-js-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :