NdYAG/react-rater

Rater does not update when receive new props

saniko opened this issue · 10 comments

saniko commented

HI,
When I receive new updated props, rater does not get updated,
all other elements do.
<Rater total={5} rating={rating} interactive={false} />

Any idea?

NdYAG commented

Hi @saniko
I'll make a demo to check if <Rater /> would update itself when its props get updated,
but it's a little weird because it should work...
Could you show me some more code so that I could reproduce the problem?

NdYAG commented

Hi @saniko
I managed to reproduce the bug.
It might be the removal of componentWillReceiveProps, I'll make a version later and notify you if it's published.

Thanks!

NdYAG commented

Hi @saniko
Please update to version 0.4.3. It is fixed.
Take a look at this example: 281c12b
Thanks again for reporting this bug. :D

saniko commented

Thanks, I will check.

vukasin-nikodijevic commented

@NdYAG
It seems that this issue isn't fully resolved as I have strange behaviour.

Even If I passed properly params somehow provided params and component state doesn't match.

Logic executed in rateing handler if filtered by type === "click".

handleRate = ({rating, type}) => {
    if (type === 'click') {
        ........
    }
  };

Please note that I didn't click on any of stars.

Issue appears with just mouse over stars.

Check attached screenshot.

NdYAG commented

Hi @vukasin-nikodijevic ,
could you show me some working snippets so that I could reproduce the bug?

vukasin-nikodijevic commented

@NdYAG - sure I'll try to create code pen for this issue.

NdYAG commented

@vukasin-nikodijevic Thank you! I'll check on it and come back soon!

NdYAG commented

Hi @vukasin-nikodijevic,
Thank you for reporting the bug! I can reproduce it even in the example.

It turns out that there are some bugs in componentWillReceiveProps, please take a look of this commit 0a526ec if you are interested.

You can upgrade react-rater to version 0.4.7, but to make it work for your repo, it's necessary to remove the fractional part, because this lib currently doesn't support fractional part in interactive mode. https://github.com/ndyag/react-rater#read-only-mode

      <div className="App">
        <div style={{width: "100%", height: "50px"}}>
          <button onClick={() => {
            this.setState({rating: 1});
          }}>Rate 1
          </button>
          <button onClick={() => {
            this.setState({rating: 2});
          }}>Rate 2
          </button>
          <button onClick={() => {
            this.setState({rating: 3});
          }}>Rate 3
          </button>
          <button onClick={() => {
            this.setState({rating: 4});
          }}>Rate 4
          </button>
          <button onClick={() => {
            this.setState({rating: 5});
          }}>Rate 5
          </button>
        </div>
        <Rater total={5} rating={this.state.rating} onRate={this.ratingHandler.bind(this)}/>
      </div>

Basically, it's easy to implement some validation code to check whether the props is a integer or not, but I think some people may tend to treat 2.5 as 2 while others may treat it as 3. So I'll leave it within their own preferences.

Feedback welcome! 🍻