After re-rendering, the star value is not changing to 0, its still set to the selected value.

[manueldho]

export const FeedbackPage = () => {

const [ratedstars, setRatedstars] = useState(0);
const [ratings, setRatings] = useState('');
const [suggestions, setSuggestions] = useState('');

const ratingChanged = (value) => setRatedstars(value);
const onRatingschange = event => setRatings(event.target.value);
const onSuggestionschange = event => setSuggestions(event.target.value);

const clearForm = () => {
    setRatedstars(0);
    setRatings('');
    setSuggestions('');
    console.log(ratedstars,'ratedstars---------------------------------------')
}

const updateFeedback = () =>  {
    const web = Web("");
    web.lists.getByTitle('Feedback')
    .items.add({
        Pleaseexplainyourrating : {ratedstars},
        Doyouhaveanysuggestionsforimprov :  {ratings},
        How_x0020_useful_x0020_is_x0020_ : {suggestions}
      }).then(() => {
          alert('success');
      }).catch(() =>  {
          clearForm()
          alert('failure')
      });
}


return (
    <div className="main-divstyle">
    <div className="hdr-style">Feedback</div>
    <div className="ques-style required"> How useful is the company financials Dashboard? </div>
    <div className="rating-style">
    <ReactStars
    count={5}
    value={ratedstars}
    onChange={ratingChanged}
    size={50}
    isHalf={true}
    emptyIcon={<i className="far fa-star"></i>}
    halfIcon={<i className="fa fa-star-half-alt"></i>}
    fullIcon={<i className="fa fa-star"></i>}
    activeColor="#ffe600"
    a11y={true}
    />

    </div>
    <div className="ques-style required"> Please explain your rating.</div>
    <textarea className='textarea-style' value={ratings} onChange={onRatingschange}></textarea>
    <div className="ques-style">Do you have any suggestions for improvement? Please be specific.</div>
    <textarea className='textarea-style' value={suggestions}  onChange={onSuggestionschange}></textarea>
    <div><button className="btn-style" onClick={updateFeedback}>Submit</button></div>
    </div>
);

}

[ertanhasani]

Right now there is no way to actually reset the value. I added it as a feature request, and I or someone else will try to implement it. Here's the feature request if you wanna stay on the loop.

As a temporary solution you could be able to do something like:

const [starsKey, setStarsKey] = useState(Math.random());

const clearForm = () => {
    setStarsKey(Math.random()); //this will generate a random number, which will cause the ReactStars component to be re rendered
    setRatings('');
    setSuggestions('');
    console.log(ratedstars,'ratedstars---------------------------------------')
}

return (
    <ReactStars
        key={starsKey} 
        ...otherProps
    />
);