My first click on the rating doesnt return a value unless I click a 2nd time about react-rating HOT 7 CLOSED

Uhm... It is weird. I tried this:

<Rating onChange={rate => alert(rate)} />

It simply alerts when the rate changes. It seems to work. Check this codepen. No need to click twice.

from react-rating.

Hey @MrAbalogu, could you try if the new release 1.0.5 solves this issue? I couldn't reproduce your behaviour. Could you give me a reproducible scenario? Nothing fancy. Something that helps me reproduce it, like issue #76.

from react-rating.

I have exactly the same problem. But you're right, @dreyescat. If I try this <Rating onChange={rate => alert(rate)} /> the alert shows me the correct number. But If I put my handleRating function it works wrong... this is my handleRating function

_handleRating = (value) => {
    try {
      const { rating } = this.state
      this.setState({ rating: value })
      const movie = this.props.movie
      console.log('Rating value in handleRating: ', rating)
      console.log('Movie value in handleRating: ', movie)
      this.props.onRating({ rating, movie })
    } catch (error) {
      console.log('error in handleRating: ', error)
    }
  }

There is a mistake somewhere but I'm not able to find it.
Could you help me?
Thank you in advance.

from react-rating.

@MariaRoblesSpin I think you are showing the previous value, not the current one.

const { rating } = this.state

This statement is assigning the previous rating value to the rating const variable. The new one is in the value parameter of the _handleRating function.

Maybe you think that the next setState call is updating this local variable... But it isn't.

from react-rating.

I am not sure what you need... But if you want to call a callbag once the setState has completed I suggest using the componentDidUpdate method:

  componentDidUpdate() {
    const { rating } = this.state;
    const { movie } = this.props;
    this.props.onRating({ rating, movie});
  }

  _handleRating = (value) => {
    this.setState({ rating: value });
  }

Check this codesandbox

from react-rating.

Same issue happened to me.
I believe it happens when the onChange forces a re-render in the Rating component.

Here's a small reproducible example.

from react-rating.

Here's a small reproducible example.

Btw, I managed to solve it by adding the initialRating:

<Rating onChange={setRate} initialRating={rate} />

from react-rating.