How to Create a Responsive Like Button in ReactJS? - GeeksforGeeks

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.JavascriptJavascriptimport 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: 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.JavascriptJavascriptstate = { liked: false };
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.JavascriptJavascripttoggle = () => {    let localLiked = this.state.liked;    localLiked = !localLiked;    this.setState({ liked: localLiked });  };
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.JavascriptJavascriptrender() {    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: 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:
react-js
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
Remove elements from a JavaScript Array
How to filter object array based on attributes?
How to get selected value in dropdown list using JavaScript ?
How to remove duplicate elements from JavaScript Array ?
Angular File Upload
How to change selected value of a drop-down list using jQuery?
How to detect browser or tab closing in JavaScript ?