No way to clear rating

[sspenst]

How can I clear the rating back to the initial empty state? Previously I could use ratingValue to clear when clicking the current rating:

  const handleRating = (value: number) => {
    if (value === rating) {
      setRating(0);
    } else {
      setRating(value);
    }
  };

But with the removal of ratingValue in v4.1.0 I'm no longer sure how to do this.

Please let me know if there is another way to clear the rating on the latest version!

[awran5]

Hi @sspenst Sorry for the late response.

Please first update to v5.1.5

And follow this example:

function MyComponent() {
  const [rating, setRating] = useState(0)

  const handleRating = (rate: number) => {
    setRating(rate)
  }

  const handleReset = () => {
    // Set the initial value
    setRating(0)
  }

  return (
    <div className='App'>
      {/* set initial value */}
      <Rating onClick={handleRating} initialValue={rating} />

      <button onClick={handleReset}>reset</button>
    </div>
  )
}

[sspenst]

Thanks @awran5 ! I've added a reset button and it seems to work fine