Rating not being reset by props after state is already set

[ninjasort]

When setting the rating on a component, the props should define the current state of the component, ideally the component should be stateless and should only have a brief state of the hover location on the rating, then return back to the prop it was set to. Currently, upon setting an initial prop, the rating is updated properly via it's state and triggers the callback with the current state, after setting this new state, one is no longer able to set a new prop such as 0 to reset the rating. Upon hover the rating returns to it's previous state.

[nunobbras]

yep, you have a problem here. Any idea about this milestone schedule? Any workarond?

[ninjasort]

Sorry, been super busy. I'll try to get to it next week.

[0xAl3xH]

Hi, it's been a while since this issue is addressed. Has anyone found a workaround?

[0xAl3xH]

So I looked at the code and found somewhat of a workaround for anyone else interested:

~line 227 of src/StarRating.jsx

I modified the code to:

  /**
   * Set position to original state
   */
  handleMouseLeave() {
    this.setState({
      pos: this.getStarRatingPosition(this.props.rating),
      rating: this.props.rating
    });
  }

Which matches the initial value set in the constructor. This produced the correct behavior for me. However disclaimer: I have not looked at whether this might have unintended consequences. The reasoning for my change is the following:

I believe the way the rating fill is being updated on user hover now is through analyzing the position of the mouse and mutating the state for rating/pos depending on where the user is hover. However, we don't really care about this information once the user's mouse has left the hovering state - so these two states should just default back to the state as set by the props.

For those who want to try this change out or do more extensive testing, the steps I took to compile the code is as follows:

• Find the module, for me this is under node_modules/react-star-rating, cd to that directory
• Make sure we have gulp and all the dependencies installed npm install, I also installed gulp cli globally with npm install gulp-cli -g
• Make the necessary changes in handleMouseLeave
• Run gulp build to compile the source to dist

The star rating module should now respect the prop whenever you're not hovering over it anymore. For reference these are the props I used:

<StarRating name="react-star-rating" rating={3} editing={true} totalStars={5} onRatingClick={(e, d)=>{this.updateRating(d.rating)}} />

The behavior is that we see a star rating with 3 stars filled and upon hover the stars will fill to whichever star our mouse is on. Upon mouse exit, the stars will fill to what we specified in the props.

[Chethannp]

Hi All,

In my scenario, When the user clicks on the star rating, I am trying to call an API to submit the latest value, All that I want to do is to revert to the original prop value when the API call fails.

My approach ->

I tried to use forwardRef to access all the child functionality and tried to overwrite the value by using the following

1. this.childRatingComponentRef.current.props.onStarClick(previousValue) => This also fails and I can't even use this because once the rating is updating I am triggering a function in the parent to make an API cal, so if I do this above approach then I will fall in an endless loop ### :(
   2. this.childRatingComponentRef.current.state.value = 1; => Fails nothing happens and the position of the star is retained :(
2. I did create another method called rollBackToPrevious and I am setting the state to the previous props value. => This also Fails :(

I am not sure on how to update the start component with a value dynamically from parent component.

Can anyone please help me !!!

Thanks in advance.