0

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.

Improve this question

2 Answers 2

Reset to default
4

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.

Another, perhaps more concise way, is to use some array methods to help, such as .fill() to populate an array firstly with empty stars, then replace those empty stars up to a given index based on your value, and finally add a half star if required:

const STAR_COUNT = 5;
const Rating = ({ value }) => {
  const stars = Array(STAR_COUNT).fill(<EmptyStar />).fill(<FullStar />, 0, Math.floor(value));
  if (value % 1 != 0) // if value is a decimal, add a half star
    stars[Math.floor(value)] = <HalfStar />;

  return <div className="rating">{stars}</div>;
};
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

The first method worked fine, all I had to do was Math.floor the value in the for loop. But that leaves me with another problem, which is that there are no empty stars to fill the rest of the five stars. So if the value is 2.5, it renders 2 full stars and 1 half star and that's it
@SaifEldeenEssam Oh yes sorry, I missed the empty star requirement, will add an edit
OK, it works now. I had to Math.floor the value in the for loop again, but it is OK. Thank you for the effort.
@SaifEldeenEssam No worries. Not too sure why you'd need to do Math.floor (maybe if you're using typscript perhaps it throws an type error of some sort). Also stars[i] = <HalfStar /> should've been stars[i-1] = <HalfStar /> (which I've edited in).
I guess it'n not :D, Thank you anyways.
|
0

Try this in your code

let rating = 3.5;

let ratingCount = 0

for(let i=1; i<=5; i++){
    if(i<=rating){
    console.log("full")
    ratingCount++
  }
}

if(rating-Math.floor(rating) !== 0){
 console.log("Half")
 ratingCount++
}

for(let i=ratingCount ; i<5; i++){
 console.log("empty")
}

Improve this answer

2 Comments

This approach didn't work for me. Firstly, I want to return some icons. This means I will do a return before I increment the ratingCount. So the increment after the return will be unreachable. Secondly, I tried to move the increment line somewhere else so it would run properly. but that rendered only a single full star.
You can return star icons where I console like in full side you can return (or push to array a sull start component) and same on other consoles respectively

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.