How to Create an Interactive Like and Dislike Button Component in React

Create a Like and Dis-Like Button Using React-Icons

Creating an interactive like and dislike button component in React using React-Icons involves several steps. React-Icons is a popular library that provides a wide range of icon components.

In this tutorial, we’ll use react-icons to create like and dislike buttons with thumbs-up and thumbs-down icons. Here’s a step-by-step guide:

Step 1: Set Up a React Project

How to Create a React + TypeScript Project with Vite

If you are completely new to Reactor have any doubts about creating a new project in Reactwith Typescript using Vite, then go to the above medium tutorial or this YouTube link and set up your first Reactproject.

Step 2: Using React Icons for Icon Integration

To create the Like Button component, we’ll need icons for both the “like” and “dislike” states. Instead of designing or sourcing custom icons, we can make use of the react-icons library, which provides a vast collection of pre-designed icons from popular icon libraries like Font Awesome and Material Icons.

Here’s how to use react-icons in your React project:

Install React Icons

Open your terminal and navigate to your project directory. Run the following command to install react-icons:

npm install react-icons --save

This command installs the react-icons library and adds it as a dependency to your project.

Import React Icons

In your LikeButton.js component file, import the icons you want to use from the react-icons library. For this example, we're using AiFillLike and AiFillDislike from the 'react-icons/ai' package:

import { AiFillLike, AiFillDislike } from 'react-icons/ai';

Use Icons in Your Component

You can now use these imported icons in your LikeButton component. In our case, we use them to represent the "like" and "dislike" states:

<AiFillLike color="blue" size="50" onClick={handleClick}/>

With these steps, you’ve successfully incorporated icons into your React component using the react-icons library. The AiFillLike and AiFillDislike components from react-icons now represent the "like" and "dislike" buttons, making your Like Button component visually engaging and user-friendly.

Step 2: Create the LikeButton Component

Inside your React project directory, navigate to the src folder. Here, you can create a new file called LikeButton.tsx to define your LikeButton component. You can use your preferred code editor for this.

In LikeButton.tsx, you can write the code for your component as follows:

import React, { useState } from 'react'
import {AiFillLike, AiFillDislike} from 'react-icons/ai'

function LikeButton() {
  const[liked, setLiked] = useState(false);
  const handleClick = () => {
    setLiked(!liked);
  };
  if(liked)
    return (<AiFillLike
      color="blue" 
      size="50" 
      onClick={handleClick}/>)
  return (<AiFillDislike
    color="red" 
    size="50" 
    onClick={handleClick}/>)  
}

export default LikeButton

Step 3: Use the LikeButton Component

Now that you’ve created the LikeButton component, you can use it in your application. For example, you can use it in the src/App.js file by importing and rendering it:

function App() {
  return (
  <div className="d-flex align-items-center justify-content-center vh-100">
    <LikeButton  />
  </div>)
}
export default App;

Step 4: Run Your React Application

Save your files and make sure your development server is running (you should have started it with npm run devin the project root). Now, open your browser and navigate to http://localhost:3000. You should see your React app with the "React Like Button" header and the like/dislike button. Clicking on the button will toggle between the like and dislike icons, and the state will change accordingly.

Video Demo

Full Video Demo of this tutorial

Congratulations! You’ve successfully built a simple LikeButton component in a React application. This article covers the essential steps to create and use a React component with state and event handling. You can now extend and integrate this component into more complex React applications as needed.

If you like this tutorial, don’t forget to subscribe to my YouTube channel and follow me on Medium.

Happy Coding :)