Using this widget in a loop - Causes issue

[abhisant]

I have a usecase where I need the rating for multiple trips that a customer has taken. I am trying to use this in a loop.

When the page is loaded -> useEffect is called and feedbackdetails are loaded for multiple rides. I loop feedbackdetails to render the stars for each ride.

When user submits 3 star for one and clicks on 'Submit Feedback' button, the feedback is submitted correctly but the second ride automatically gets the (same) 3 star rating.

The way I am storing the rating in state is like {index: rating}, but I am resetting it after each loadFeedbackDetails. loadFeedbackDetails will return only the rides that aren't submitted for feedback.

Can someone explain why is this the case?
I am resetting -- setRating({}); when the axios.get happens and I am setting initialValue to initialValue={rating[index] || 0}

Have been stuck on this issue since 2 days.

---

const [rating, setRating] = useState({});

const handleRating = (rate: number, index: number) => {
let tempRating = rating;
tempRating[index] = rate;
console.log(tempRating);
setRating(tempRating)
}

function loadFeedbackDetails() {
    setFeedLoading(true);
    axios.get(process.env.REACT_APP_API + '/feedback/' + session.userId)
        .then((axiosResponse1: AxiosResponse) => {
            setRating({});
            setFeedLoading(false);
            setfeedbackDetails(axiosResponse1.data);
        })
        .catch((reason: AxiosError) => {
          // TBD
        })
}

function submitFeedBack(item: any, index: number) {
axios.post(process.env.REACT_APP_API + '/feedback?' + 'rating=' + rating[index])
.then((axiosResponse1: AxiosResponse) => {
setRating({});
console.log(axiosResponse1.data);
loadFeedbackDetails();
})
.catch((reason: AxiosError) => {
// TBD
})
}

useEffect(() => {
    loadFeedbackDetails();
}, []);

---

{feedbackDetails.map((item, index) => (

{

                                <IonCardContent>
                                   
                                    <p>Rate your trip!</p>
                                    <p>
                                        <Rating initialValue={rating[index] || 0} transition={true}
                                            onClick={(event) => handleRating(event, index)} />
                                                {/* <Rating style={{ maxWidth: 200 }} value={rating[index] || 0} onChange={(event: number) => handleRating(event, index)} /> */}


                                    </p>
                                   

                                    <p> <IonButton color="success" onClick={() => submitFeedBack(item, index)} class="feedbackbutton">Submit Feedback</IonButton>
                                      

                            }

                        </IonCard>
                    ))}