Placeholder rating not working about react-rating

[therayess]

Awesome! Got it to work as described ^^ thanks Drey!

[dreyescat]

I have created a jsfiddle with a simple example using the placeholder property.

[dreyescat]

The placeholder property is a little bit tricky. It does not hold a real value. The idea of this property is to simulate the HTML input placeholder attribute. It is only shown when the rating has no value.

In your case, you are initializing the rating with a value (initialRate={ratingAvg}) so your placeholder is simply ignored because it has an actual value.

If you remove the initialRate property then the placeholder will take place.

<Rating
  empty="glyphicon glyphicon-star-empty star-grey fs-xl"
  placeholder="glyphicon glyphicon-star-empty star-red fs-xl" placeholderRate={ratingAvg} 
  full="glyphicon glyphicon-star star-yellow fs-xl"
/>

it should display yellow stars by default and on hover it should display red ones, right?

When you hover over the rating the full property is applied. While no rate is selected, the placeholder is shown when you hover out the rating. Of course, until you select a rate. Then placeholder is ignored in favour of the full property.

Hope it helps. Let me know otherwise 😃.