Build a Simple React Component for a Dynamic Star Rating System

Written by

javascriptfundamentals

in

In today’s digital world, user feedback is crucial. Whether it’s for a product review, a movie rating, or even just gauging the quality of a blog post, star rating systems are a ubiquitous and effective way to collect this valuable information. As developers, building a dynamic and interactive star rating component is a fundamental skill. It enhances user experience, provides valuable data, and can be integrated seamlessly into various applications. This tutorial will guide you, step-by-step, on how to build a clean, functional, and reusable star rating component in React JS, perfect for beginners and intermediate developers alike.

Why Build a Star Rating Component?

Before we dive into the code, let’s explore why a star rating component is a valuable asset:

  • User Engagement: Interactive elements like star ratings make your application more engaging and enjoyable.
  • Data Collection: Star ratings provide a quantifiable way to gather user feedback, which is essential for understanding user satisfaction.
  • Versatility: You can use star ratings in various contexts, from e-commerce sites and review platforms to content management systems.
  • Improved User Experience: A well-designed star rating system is intuitive and easy to use, leading to a better user experience.

Prerequisites

To follow this tutorial, you should have a basic understanding of:

  • HTML and CSS
  • JavaScript (ES6+)
  • React fundamentals (components, props, state)
  • Node.js and npm (or yarn) installed on your machine

If you’re new to React, I recommend completing the official React tutorial or a similar introductory course before proceeding. It will help you grasp the concepts more easily.

Setting Up the Project

Let’s start by creating a new React project using Create React App. Open your terminal and run the following command:

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

This will create a new React project named “star-rating-component” and navigate you into the project directory. Next, clear the contents of the `src/App.js` file and replace it with the following basic structure:

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

function App() {
  const [rating, setRating] = useState(0);

  return (
    <div className="App">
      <h1>Star Rating Component</h1>
      {/*  Star rating component will go here */}
    </div>
  );
}

export default App;

Also, clear the contents of `src/App.css` and add some basic styling to center the content:

.App {
  text-align: center;
  margin-top: 50px;
}

Creating the Star Component

Let’s create a new component specifically for the star rating. Create a new file named `src/StarRating.js` and add the following code:

import React, { useState } from 'react';
import './StarRating.css'; // Import the CSS file

function StarRating() {
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);

  const handleClick = (value) => {
    setRating(value);
    // You can also send the rating value to the server here
    console.log(`Rating selected: ${value}`);
  };

  const handleMouseEnter = (value) => {
    setHover(value);
  };

  const handleMouseLeave = () => {
    setHover(0);
  };

  return (
    <div className="star-rating">
      {[...Array(5)].map((star, index) => {
        const ratingValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={ratingValue}
              onClick={() => handleClick(ratingValue)}
            />
            <svg
              className="star"
              width="30"
              height="30"
              viewBox="0 0 25 25"
              fill={ratingValue  handleMouseEnter(ratingValue)}
              onMouseLeave={handleMouseLeave}
            >
              <path d="M12.5 0.7L15.3 9.4L24.3 9.8L17.5 15.6L19.9 24.2L12.5 19.8L5.1 24.2L7.5 15.6L0.7 9.8L9.7 9.4L12.5 0.7Z" />
            </svg>
          </label>
        );
      })}
    </div>
  );
}

export default StarRating;

Let’s break down this code:

  • Import Statements: We import `React` and `useState` from React, and we also import a CSS file for styling.
  • State Variables:
    • `rating`: This state variable stores the currently selected rating (a number between 1 and 5). It’s initialized to 0.
    • `hover`: This state variable keeps track of the star the user is currently hovering over. This is useful for the visual feedback of showing which star will be selected if clicked.
  • `handleClick` Function: This function is triggered when a star is clicked. It updates the `rating` state with the value of the clicked star and logs the selected rating to the console. In a real application, you’d likely send this rating to a server.
  • `handleMouseEnter` Function: This function is triggered when the mouse enters a star. It updates the `hover` state with the value of the hovered star.
  • `handleMouseLeave` Function: This function is triggered when the mouse leaves a star. It resets the `hover` state to 0.
  • JSX Structure:
    • We use an array of 5 elements to create five stars. The `[…Array(5)].map()` creates an array of 5 undefined values, which we can then map to render the stars.
    • Inside the map function, we create a `label` element for each star. Each label contains an `input` of type “radio” and an `svg` element for the star icon.
    • The `input` element is hidden. It is there so clicking on the star will work as a radio input element.
    • The `svg` element uses a path to define the shape of the star.
    • The `fill` attribute of the `svg` element is dynamically set based on the `rating` and `hover` states. If the rating value is less than or equal to the hover value or the rating value, the star is filled with a gold color (`#ffc107`); otherwise, it’s filled with a light gray (`#e4e4e4`).
    • The `onMouseEnter` and `onMouseLeave` events are attached to each star to handle the hover effect.
    • The `onClick` event is attached to each input to handle the click event.

Now, create the `src/StarRating.css` file and add the following CSS to style the stars:

.star-rating {
  display: flex;
  align-items: center;
  justify-content: center;
}

.star {
  cursor: pointer;
  margin: 5px;
}

input[type="radio"] {
  display: none;
}

This CSS styles the star rating container to be a flex container with centered items, sets a cursor on the stars for visual feedback, and hides the radio input. You can customize these styles to match your application’s design.

Integrating the Star Rating Component into App.js

Now, let’s integrate the `StarRating` component into our `App.js` file. Replace the comment `/* Star rating component will go here */` with the following code:

Your `src/App.js` file should now look like this:

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

function App() {
  const [rating, setRating] = useState(0);

  return (
    <div className="App">
      <h1>Star Rating Component</h1>
      <StarRating />
    </div>
  );
}

export default App;

Import the `StarRating` component at the top of the file. Now, when you run your application (`npm start`), you should see the star rating component displayed in the center of the page.

Adding Functionality: Displaying the Selected Rating

Let’s add a feature to display the currently selected rating below the stars. Modify the `App.js` file to include the following:

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

function App() {
  const [rating, setRating] = useState(0);

  const handleRatingChange = (newRating) => {
    setRating(newRating);
  };

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

export default App;

Here, we’ve added these changes:

  • `handleRatingChange` Function: This function is passed down as a prop to the `StarRating` component. It receives the new rating from the `StarRating` component and updates the `rating` state in the `App` component.
  • `onRatingChange` Prop: We pass the `handleRatingChange` function as a prop to the `StarRating` component.
  • Displaying the Rating: We added a `<p>` element to display the selected rating.

Now, let’s modify the `StarRating` component to call the `onRatingChange` prop. Modify the `StarRating.js` file:

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

function StarRating({ onRatingChange }) {
  const [rating, setRating] = useState(0);
  const [hover, setHover] = useState(0);

  const handleClick = (value) => {
    setRating(value);
    onRatingChange(value);
    console.log(`Rating selected: ${value}`);
  };

  const handleMouseEnter = (value) => {
    setHover(value);
  };

  const handleMouseLeave = () => {
    setHover(0);
  };

  return (
    <div className="star-rating">
      {[...Array(5)].map((star, index) => {
        const ratingValue = index + 1;
        return (
          <label key={index}>
            <input
              type="radio"
              name="rating"
              value={ratingValue}
              onClick={() => handleClick(ratingValue)}
            />
            <svg
              className="star"
              width="30"
              height="30"
              viewBox="0 0 25 25"
              fill={ratingValue  handleMouseEnter(ratingValue)}
              onMouseLeave={handleMouseLeave}
            >
              <path d="M12.5 0.7L15.3 9.4L24.3 9.8L17.5 15.6L19.9 24.2L12.5 19.8L5.1 24.2L7.5 15.6L0.7 9.8L9.7 9.4L12.5 0.7Z" />
            </svg>
          </label>
        );
      })}
    </div>
  );
}

export default StarRating;

Here, we’ve added these changes:

  • `onRatingChange` as a prop: The `StarRating` component now receives an `onRatingChange` prop.
  • Calling `onRatingChange`: We call the `onRatingChange` prop in the `handleClick` function, passing it the new rating value.

Now, when you click a star, the selected rating will be displayed below the star rating component.

Handling Hover Effects

The code already includes hover effects, but let’s review how they work. The `handleMouseEnter` and `handleMouseLeave` functions in `StarRating.js` manage the visual feedback when the user hovers over the stars. The fill color of the stars changes based on the `hover` state, providing a preview of the rating that will be selected if the user clicks. This improves the user experience by making the component more interactive.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid or fix them:

  • Incorrect Path in SVG: The path within the SVG element defines the star shape. A small error in this path can make the star look distorted or not render at all. Double-check your path definition against a known-good example. Also, ensure the `viewBox` attribute is correctly set.
  • CSS Conflicts: If the star’s appearance is not as expected, there might be CSS conflicts. Use your browser’s developer tools (Inspect Element) to see which CSS rules are being applied and override them if necessary. Make sure your CSS file is correctly imported.
  • Incorrect Event Handling: Ensure that the `onClick`, `onMouseEnter`, and `onMouseLeave` event handlers are correctly attached to the right elements. Check for typos in the event handler names.
  • State Management Issues: If the rating is not updating correctly, check your state management. Make sure you are correctly updating the `rating` state using `setRating`. Also, ensure that the `onRatingChange` prop is correctly passed and called from the parent component.
  • Accessibility: The current implementation uses radio inputs which are hidden. Consider adding `aria-label` attributes to the `label` elements to improve accessibility for screen readers.

SEO Best Practices

To improve the search engine optimization (SEO) of your blog post, consider the following:

  • Keywords: Naturally incorporate relevant keywords such as “React star rating”, “React component”, “star rating tutorial”, and “React JS” throughout your content, including the title, headings, and body.
  • Meta Description: Write a concise meta description (under 160 characters) that accurately summarizes the content of your blog post and includes relevant keywords.
  • Headings: Use proper HTML headings (H2, H3, H4) to structure your content logically. This helps search engines understand the hierarchy of your information.
  • Image Alt Text: If you include images (e.g., screenshots of the code), provide descriptive alt text for each image. This helps search engines understand the image content.
  • Mobile-Friendliness: Ensure your website is responsive and works well on mobile devices.
  • Content Quality: Write high-quality, original content that provides value to your readers. The longer people stay on your page, the better it is for SEO.
  • Internal Linking: Link to other relevant articles on your blog to improve user engagement and site navigation.

Key Takeaways

  • You’ve learned how to create a reusable star rating component in React.
  • You understand how to handle user interactions (clicks and hovers) to provide a dynamic user experience.
  • You can now integrate this component into your React applications to gather user feedback.
  • You’ve learned how to pass data between components using props and handle state changes.
  • You have a practical understanding of how to style React components.

FAQ

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

  1. Can I customize the number of stars? Yes, you can easily customize the number of stars by changing the `[…Array(5)].map()` part of the code in the `StarRating` component. For example, to have 10 stars, change it to `[…Array(10)].map()`. Remember to adjust your styling and logic accordingly.
  2. How do I send the rating to a server? In the `handleClick` function, instead of just logging the rating to the console, you would make an API call (e.g., using `fetch` or `axios`) to send the rating to your server. Include the rating value in the request body.
  3. How can I improve accessibility? You can improve accessibility by adding `aria-label` attributes to the `label` elements in the `StarRating` component. For example, `<label aria-label=”Rate this item {ratingValue} stars”>`. Also, ensure proper keyboard navigation.
  4. How can I add different star icons? You can change the `svg` element to use a different star icon. You can either create your own SVG path or use an icon library like Font Awesome or Material UI Icons.
  5. How can I handle half-star ratings? To handle half-star ratings, you’ll need to modify the component to allow for fractional values. This will involve adjusting the `handleClick` function, and how you display the stars (e.g., using a background image with a partial fill). You also might need to adjust the logic for the hover effect and how the rating is displayed.

Building a star rating component in React is a valuable skill that enhances your ability to create interactive and user-friendly web applications. By following the steps outlined in this tutorial, you’ve gained a solid foundation for implementing this feature in your projects. Remember to practice, experiment with different customizations, and always prioritize user experience. The principles learned here can be extended to build other interactive UI components, making your applications more engaging and effective. You can expand on this by adding features such as allowing the user to clear their rating, or by adding a visual representation of average ratings. Keep exploring, keep coding, and keep improving!

More posts