How to render elements based on a given value in React JS?

I want to render some stars based on a specific value, and this is what I have done so far

const Rating = ({ value }) => {
  const renderStars = () => {
    let stars = []; // This array should contain all stars either full, half or empty star

    for (let i = 0; i < value; i++) {
      if (value % 1 !== 0) {
        // If the value has decimal number
      } else {
        // If the value has NO decimal number
      }
    }

    return stars?.map((star) => star); // Mapping the stars array
  };

  return <div className="rating">{renderStars()}</div>;
};

export default Rating;

Now I have 3 icons: a full star, a half star, and an empty star. Let’s say the rating value is 3.5, so what I want is to push to the stars array 3 full stars 1 half star and 1 empty star so that will be 5 stars in total. And then I can map through the array and render all the stars.

>Solution :

You can loop through up until your value as you’re currently doing, where for each iteration you push a full star, and then after the loop is complete, check if value is a decimal to determine if you should push an additional half star:

const STAR_COUNT = 5;
const Rating = ({ value }) => {
  const stars = Array.from({length: STAR_COUNT}, () => <EmptyStar />);
  let i;
  for (i = 0; i < value; i++) { // this will loop Math.floor(value) times
    stars[i] = <FullStar />;
  }

  if (value % 1 != 0) // if value is a decimal, add a half star
    stars[i-1] = <HalfStar />;

  return <div className="rating">{stars}</div>;
};

I would also suggest wrapping this component in a call to React.memo() so that the for loop logic only runs when your value prop changes, and not what the parent rerenders.