I made this function in React that allows users to click one of 5 stars and it visually shows how many stars were "selected" (a 5-star rating system). This function is in its own .js file in a React app, and it returns a div element that is rendered in a different .js file.

My problem is that I want to display how many stars the user clicked (ex. 3 out of 5 stars), but I don't know how to get that information from the .js file with the function to the other .js file where the div element is rendered.

Any help would be much appreciated!

import React, { useState } from "react";

const StarRating = () => {
    const [rating, setRating] = useState(0);
    const [hover, setHover] = useState(0);
    return (
      <div className="star-rating">
        {[...Array(5)].map((star, index) => {
          index += 1;
          return (
            <button class="star"
              type="button"
              key={index}
              className={index <= (hover || rating) ? "on" : "off"}
              onClick={() => setRating(index)}
              onMouseEnter={() => setHover(index)}
              onMouseLeave={() => setHover(rating)}
            >
              <span className="star">&#9863;</span>
            </button>
          );
        })}
      </div>
    );
  };

  export default StarRating;