Build a Simple React Component for a Star Rating System

Written by

javascriptfundamentals

in

In the world of web development, user feedback is gold. Whether it’s for a product review, a service evaluation, or even just gauging the popularity of a blog post, star ratings provide an immediate and intuitive way for users to express their opinions. As a senior software engineer and technical content writer, I’ve seen firsthand how crucial it is to implement user-friendly features that enhance the user experience. In this tutorial, we’ll dive into building a simple, yet effective, star rating component using ReactJS. This component will be reusable, customizable, and easy to integrate into your existing React applications. We’ll break down the concepts into simple, digestible steps, perfect for beginners and intermediate developers alike.

Why Star Ratings Matter

Star ratings offer several benefits:

  • Improved User Engagement: They provide a quick and easy way for users to provide feedback.
  • Enhanced User Experience: They make it easier for users to understand the quality or popularity of something at a glance.
  • Data Collection: They provide valuable data for analysis and improvement.
  • Increased Conversions: In e-commerce, positive ratings can lead to increased sales.

Imagine you’re building an e-commerce platform. Without star ratings, users might have to read through lengthy reviews to understand the overall sentiment towards a product. With a star rating system, they can immediately see the average rating, saving time and making their decision-making process easier. This, in turn, can lead to higher engagement and conversions.

Setting Up Your React Project

Before we start coding, let’s set up our React project. If you already have a React project, feel free to skip this step. If not, follow these simple instructions:

Open your terminal or command prompt and run the following command:

npx create-react-app star-rating-component
cd star-rating-component

This command creates a new React app named “star-rating-component” and navigates you into the project directory. Next, we’ll clean up the default files to prepare for our component.

Project Structure and File Setup

Inside your “src” directory, you should have the following files. We’ll primarily work with `App.js` and create a new component file for our star rating component. You can delete the default content inside `App.js` and `App.css` if you wish, or you can modify them later to suit your needs. For this tutorial, we will create a new file called `StarRating.js` inside the `src` folder.

Your project structure should look like this:

star-rating-component/
├── node_modules/
├── public/
├── src/
│   ├── App.css
│   ├── App.js
│   ├── StarRating.js  <-- New file
│   ├── index.js
│   └── ...
├── package.json
└── ...

Creating the StarRating Component

Now, let’s create the `StarRating.js` file and start building our component. This component will handle rendering the stars, managing the selected rating, and providing a way to interact with the stars. Here’s a step-by-step guide:

Step 1: Basic Component Structure

Open `StarRating.js` and add the basic structure for our React component:

import React, { useState } from 'react';

function StarRating() {
  return (
    <div className="star-rating">
      {/* Stars will go here */}
    </div>
  );
}

export default StarRating;

This code sets up a functional component using the `useState` hook to manage the state. We’ve created a `div` element with the class name “star-rating” to contain our stars. We’ve also imported `useState`, which we will use to manage the selected rating.

Step 2: Rendering the Stars

We’ll use an array to represent our stars and map over it to render the star icons. Add the following code inside the `<div className=”star-rating”>` element in your `StarRating.js` file:

import React, { useState } from 'react';
import { FaStar } from 'react-icons/fa'; // Import the star icon

function StarRating({ totalStars = 5 }) {
  const [rating, setRating] = useState(0);
  const [hoverRating, setHoverRating] = useState(0);

  return (
    <div className="star-rating">
      {[...Array(totalStars)].map((_, index) => {
        const starValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={starValue}
              onClick={() => setRating(starValue)}
              onMouseEnter={() => setHoverRating(starValue)}
              onMouseLeave={() => setHoverRating(0)}
            />
            <FaStar
              className="star"
              color={starValue 
          </label>
        );
      })}
    </div>
  );
}

export default StarRating;

Here’s a breakdown:

  • We import the `FaStar` icon from the `react-icons/fa` library. Make sure you have installed this library by running `npm install react-icons`.
  • We use `useState` to manage the `rating` (the selected star value) and `hoverRating` (the star value the user is currently hovering over).
  • `totalStars`: A prop to configure the total number of stars. Defaults to 5.
  • We map over an array of the size of `totalStars` to render each star.
  • Inside the map function, we create a label for each star.
  • The input type is `radio` and is hidden. It is used to handle the selection. The `onClick` event handler updates the rating state.
  • The `FaStar` component displays the star icon. We use the `color` prop to change the star’s color based on the selected rating or hover state.
  • `onMouseEnter` and `onMouseLeave` are used to handle the hover effect.

Step 3: Styling the Component

Add some basic CSS to your `App.css` file to style the star rating component. This will give it a visual appearance.

.star-rating {
  display: flex;
  flex-direction: row-reverse;
  font-size: 2em;
}

.star-rating input {
  display: none;
}

.star {
  cursor: pointer;
  transition: color 200ms;
}

This CSS provides a basic layout and styling for the stars. The `flex-direction: row-reverse` makes the stars display from right to left, which is a common convention for star ratings. The `display: none` on the input makes them invisible, and the cursor changes to a pointer when hovering over a star.

Step 4: Using the Component in App.js

Now, let’s use the `StarRating` component in our `App.js` file:

import React from 'react';
import StarRating from './StarRating';

function App() {
  return (
    <div className="App">
      <h1>Star Rating Component</h1>
      <StarRating />
      <StarRating totalStars={7} />  {/* Example with 7 stars */}
    </div>
  );
}

export default App;

Here, we import the `StarRating` component and render it inside the `App` component. We also demonstrate how to use the `totalStars` prop to change the number of stars displayed.

Run your application using `npm start` in your terminal. You should see a star rating component displayed in your browser. When you hover over the stars, they should highlight, and when you click, the rating should be selected.

Handling User Interactions and State

The code we’ve written so far handles the visual representation of the stars and the hover effects. However, it doesn’t do anything with the selected rating. In a real-world application, you’ll want to store the selected rating and potentially send it to a server or update the UI accordingly. Let’s modify our `StarRating` component to handle this.

Step 5: Adding an onChange Handler

We’ll add an `onChange` prop to our `StarRating` component. This prop will be a function that is called whenever the user selects a new rating. Modify the `StarRating.js` component:

import React, { useState } from 'react';
import { FaStar } from 'react-icons/fa';

function StarRating({ totalStars = 5, onRatingChange }) {
  const [rating, setRating] = useState(0);
  const [hoverRating, setHoverRating] = useState(0);

  const handleRatingClick = (starValue) => {
    setRating(starValue);
    if (onRatingChange) {
      onRatingChange(starValue);
    }
  };

  return (
    <div className="star-rating">
      {[...Array(totalStars)].map((_, index) => {
        const starValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={starValue}
              onClick={() => handleRatingClick(starValue)}
              onMouseEnter={() => setHoverRating(starValue)}
              onMouseLeave={() => setHoverRating(0)}
            />
            <FaStar
              className="star"
              color={starValue 
          </label>
        );
      })}
    </div>
  );
}

export default StarRating;

Key changes:

  • We added the `onRatingChange` prop.
  • We created a `handleRatingClick` function. This function does two things: it updates the `rating` state, and it calls the `onRatingChange` function (if it exists) with the selected rating.
  • The `onClick` handler of the input now calls `handleRatingClick`.

Step 6: Using the onChange Handler in App.js

Now, let’s use the `onChange` prop in our `App.js` file to handle the rating change.

import React, { useState } from 'react';
import StarRating from './StarRating';

function App() {
  const [userRating, setUserRating] = useState(0);

  const handleRatingChange = (newRating) => {
    setUserRating(newRating);
    console.log("New rating: ", newRating);
    // Here you can send the rating to your server or update your UI
  };

  return (
    <div className="App">
      <h1>Star Rating Component</h1>
      <p>Selected Rating: {userRating}</p>
      <StarRating onRatingChange={handleRatingChange} />
      <StarRating totalStars={7} onRatingChange={handleRatingChange} />
    </div>
  );
}

export default App;

Here’s what we did:

  • We added a `userRating` state variable to store the selected rating.
  • We created a `handleRatingChange` function that updates the `userRating` state and logs the new rating to the console. In a real application, you would use this function to send the rating to a server or update your UI.
  • We passed the `handleRatingChange` function as the `onRatingChange` prop to the `StarRating` component.
  • We display the `userRating` in a paragraph to show the selected value.

Now, when you click on a star, the `userRating` state in `App.js` will update, and the selected rating will be displayed. The rating will also be logged to the console.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Icon Import: Make sure you’ve installed the `react-icons` library and that you are importing the correct icon (e.g., `FaStar`) from the correct module.
  • CSS Issues: Ensure that your CSS is correctly applied and that the selectors are correct. Use your browser’s developer tools to inspect the elements and see if the styles are being applied.
  • State Management Errors: Double-check that you’re correctly updating the state variables using `useState`. Make sure your component re-renders when the state changes.
  • Prop Drilling: If you need to pass the rating value up to a parent component, ensure that you are correctly passing the `onRatingChange` prop. If you are using Context API or a state management library like Redux or Zustand, make sure the state is being correctly updated and accessed.
  • Event Handling: Ensure that your event handlers (e.g., `onClick`, `onMouseEnter`, `onMouseLeave`) are correctly attached to the appropriate elements.
  • Incorrect Star Color: The star color is controlled by a condition that checks if the star index is less than or equal to the hover rating or the selected rating. If your stars are not highlighting correctly, double-check this condition.
  • Missing Dependencies: If you’re encountering errors about missing modules, make sure you’ve installed all the necessary dependencies using `npm install`.

Advanced Features and Customization

You can extend this component with several advanced features and customizations:

  • Disabled State: Add a `disabled` prop to disable user interaction with the stars. This can be useful when a user has already rated something.
  • Read-Only Mode: Display the star rating without allowing the user to change it.
  • Custom Star Icons: Replace the default star icon with a custom icon.
  • Half-Star Ratings: Allow users to select half-star ratings.
  • Tooltips: Display tooltips on hover to show the rating value.
  • Accessibility: Improve accessibility by adding ARIA attributes to the component.
  • Animation: Add animation effects to the star ratings to make them more visually appealing.
  • Integration with APIs: Integrate with a backend API to save and retrieve user ratings.

Let’s look at one example, adding a disabled state.

Adding a Disabled State

First, add a `disabled` prop to the `StarRating` component.

import React, { useState } from 'react';
import { FaStar } from 'react-icons/fa';

function StarRating({ totalStars = 5, onRatingChange, disabled = false }) {
  const [rating, setRating] = useState(0);
  const [hoverRating, setHoverRating] = useState(0);

  const handleRatingClick = (starValue) => {
    if (!disabled) {
      setRating(starValue);
      if (onRatingChange) {
        onRatingChange(starValue);
      }
    }
  };

  return (
    <div className="star-rating">
      {[...Array(totalStars)].map((_, index) => {
        const starValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={starValue}
              onClick={() => handleRatingClick(starValue)}
              onMouseEnter={() => !disabled && setHoverRating(starValue)}
              onMouseLeave={() => !disabled && setHoverRating(0)}
              disabled={disabled}
            />
            <FaStar
              className="star"
              color={starValue 
          </label>
        );
      })}
    </div>
  );
}

export default StarRating;

Key changes:

  • We added the `disabled` prop.
  • We added a check inside the `handleRatingClick` function to prevent the rating from being updated if the component is disabled.
  • We conditionally added the `disabled` attribute to the input element.
  • We conditionally update the `hoverRating` based on whether the component is disabled.

Then, in your `App.js`, you can use it like this:

import React, { useState } from 'react';
import StarRating from './StarRating';

function App() {
  const [userRating, setUserRating] = useState(0);
  const [isRatingDisabled, setIsRatingDisabled] = useState(false);

  const handleRatingChange = (newRating) => {
    setUserRating(newRating);
    console.log("New rating: ", newRating);
  };

  return (
    <div className="App">
      <h1>Star Rating Component</h1>
      <p>Selected Rating: {userRating}</p>
      <button onClick={() => setIsRatingDisabled(!isRatingDisabled)}>
        Toggle Disable
      </button>
      <StarRating onRatingChange={handleRatingChange} disabled={isRatingDisabled} />
    </div>
  );
}

export default App;

Now, you can toggle the disabled state of the star rating component using the button. When disabled, the stars will not respond to user interactions.

Summary: Key Takeaways

In this tutorial, we’ve built a simple yet functional star rating component in React. We covered the essential steps, from setting up the project to handling user interactions and adding advanced features. Here’s a quick recap of the key takeaways:

  • Component Structure: We created a reusable component that renders star icons using React components.
  • State Management: We used the `useState` hook to manage the selected rating and hover state.
  • User Interaction: We implemented event handlers to respond to user clicks and hovers.
  • Props: We learned how to pass props to customize the component, such as the total number of stars and an `onChange` handler.
  • Customization: We looked at how to add a disabled state to the component.

FAQ

Here are some frequently asked questions about building a star rating component in React:

  1. How can I customize the star icons?

    You can replace the `FaStar` component with any other icon component from `react-icons` or use custom SVG icons.

  2. How do I handle half-star ratings?

    You would need to modify the rendering logic to display half stars and adjust the click and hover handlers accordingly. You would also need to change the input type to something other than radio, and handle the logic for selecting half-star values.

  3. How can I store the rating in a database?

    You would need to send the selected rating to your backend server using an API call (e.g., using `fetch` or `axios`). The API call would then store the rating in your database.

  4. How can I improve the accessibility of the component?

    You can add ARIA attributes (e.g., `aria-label`, `aria-valuemin`, `aria-valuemax`, `aria-valuenow`) to the component to make it more accessible to screen readers. You should also ensure that the component is keyboard-navigable.

  5. Can I use this component in a production environment?

    Yes, this component is production-ready. However, you might want to add more advanced features like error handling, data validation, and integration with a backend API for saving and retrieving ratings.

Building a star rating component in React is a great way to improve user engagement and gather valuable feedback. By following this guide, you should now have a solid understanding of how to create a reusable star rating component that you can easily integrate into your React applications. Remember to experiment, customize, and adapt the code to meet your specific needs. With a little effort, you can create a user-friendly and visually appealing star rating system that enhances the overall user experience of your web applications. Remember, the best learning comes from doing, so go ahead and start building your own star rating component today.

More posts