How to create a rating component in ReactJS ?
Last Updated :
23 Jul, 2025
Creating a rating component in React application allows user to register their review and rate the items using clickable stars. Using a custom rating component enhances the UI and experience of users.
Prerequisite:
Approach
To create a Rating component in React we will use the react-icons and styled-components libraries. Import the star icons from react icons and add the styles using styled-components. Implement the rating logic to style the stars in click and display the provided rating.
Steps to create React App and Install required modules
Step 1: Initialize React Project
You will start a new project using create-react-app command.
npx create-react-app react-rating
Step 2: Switch to Project Directory
Now go to your react-rating folder by typing the given command in the terminal.
cd react-rating
Step 3: Install Required Packages
Install the dependencies required in this project by typing the given command in the terminal.
npm install --save styled-components
npm install --save react-icons
Now create the components folder in src then go to the components folder and create two files Rating.js and RatingStyles.js.
Project Structure:

The updated dependencies in package.json file are:
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"styled-components": "^5.3.10",
"react-icons": "^4.10.1,
"web-vitals": "^1.0.1"
},
Example: In this example, we will design a rating component, for that we will need to manipulate the App.js file and other created components file.
JavaScript
// Filename - components/Rating.js
import React, { useState } from "react";
import { FaStar } from "react-icons/fa";
import { Container, Radio, Rating } from "./RatingStyles";
const Rate = () => {
const [rate, setRate] = useState(0);
return (
<Container>
{[...Array(5)].map((item, index) => {
const givenRating = index + 1;
return (
<label>
<Radio
type="radio"
value={givenRating}
onClick={() => {
setRate(givenRating);
alert(
`Are you sure you want to give
${givenRating} stars ?`
);
}}
/>
<Rating>
<FaStar
color={
givenRating < rate || givenRating === rate
? "000"
: "rgb(192,192,192)"
}
/>
</Rating>
</label>
);
})}
</Container>
);
};
export default Rate;
JavaScript
// Filename - components/RatingStyles.js
import styled from 'styled-components';
export const Container = styled.div`
display: flex;
justify-content: center;
align-items: center;
min-height: 60vh;
font-size: 60px;
`
export const Radio = styled.input`
display: none;
`
export const Rating = styled.div`
cursor: pointer;
`
JavaScript
// Filename - App.js
import './App.css';
import Rating from './components/Rating';
function App() {
return (
<Rating />
);
}
export default App;
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Similar Reads
JavaScript Tutorial JavaScript is a programming language used to create dynamic content for websites. It is a lightweight, cross-platform, and single-threaded programming language. It's an interpreted language that executes code line by line, providing more flexibility.JavaScript on Client Side: On the client side, Jav
11 min read
React Interview Questions and Answers React is an efficient, flexible, and open-source JavaScript library that allows developers to create simple, fast, and scalable web applications. Jordan Walke, a software engineer who was working for Facebook, created React. Developers with a JavaScript background can easily develop web applications
15+ min read
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
JavaScript Interview Questions and Answers JavaScript is the most used programming language for developing websites, web servers, mobile applications, and many other platforms. In Both Front-end and Back-end Interviews, JavaScript was asked, and its difficulty depends upon the on your profile and company. Here, we compiled 70+ JS Interview q
15+ min read
Decorators in Python In Python, decorators are a powerful and flexible way to modify or extend the behavior of functions or methods, without changing their actual code. A decorator is essentially a function that takes another function as an argument and returns a new function with enhanced functionality. Decorators are
10 min read
AVL Tree Data Structure An AVL tree defined as a self-balancing Binary Search Tree (BST) where the difference between heights of left and right subtrees for any node cannot be more than one. Balance Factor = left subtree height - right subtree heightFor a Balanced Tree(for every node): -1 ⤠Balance Factor ⤠1Example of an
4 min read
What is a Neural Network? Neural networks are machine learning models that mimic the complex functions of the human brain. These models consist of interconnected nodes or neurons that process data, learn patterns and enable tasks such as pattern recognition and decision-making.In this article, we will explore the fundamental
12 min read
Domain Name System (DNS) DNS is a hierarchical and distributed naming system that translates domain names into IP addresses. When you type a domain name like www.geeksforgeeks.org into your browser, DNS ensures that the request reaches the correct server by resolving the domain to its corresponding IP address.Without DNS, w
8 min read
NodeJS Interview Questions and Answers NodeJS is one of the most popular runtime environments, known for its efficiency, scalability, and ability to handle asynchronous operations. It is built on Chromeâs V8 JavaScript engine for executing JavaScript code outside of a browser. It is extensively used by top companies such as LinkedIn, Net
15+ min read
HTML Interview Questions and Answers HTML (HyperText Markup Language) is the foundational language for creating web pages and web applications. Whether you're a fresher or an experienced professional, preparing for an HTML interview requires a solid understanding of both basic and advanced concepts. Below is a curated list of 50+ HTML
14 min read