for loop in vanilla JavaScript

July 10, 2024

I have a rate number for 3 different products,
and i am trying to render a star svg base of number of rate.
for example product A has rate 3, I want to render star img, 3 times.
the maximum star they can have is 5.

i wrote a code like this

const ratingHandler = (productRate) => {
  for (let i = 0; i < productRate + 1; i++) {
    console.log(productRate);
    return `<img src="assets/star.svg" alt="rating-star" />`;
  }
};

product rate shows the rating number correctly in my console.log, but the render in the loop doesn’t render base of that number

>Solution :

Your function ends as soon as it first hits the return. You need to build up the complete string before returning:

const ratingHandler = (productRate) => {
  let stars = '';
  for (let i = 0; i < productRate + 1; i++) {
    stars += `<img src="assets/star.svg" alt="rating-star" />`;
  }
  return stars;
};