unable to update star rating from react to mongodb - reactjs

Question

Hello I am stuck in updating the star rating from react js code using axios to mongodb. The stars are getting clicked but the value is not showing neither getting updating.
Here is the front end code:
const StarRating = (props) => {
console.log(props);
return (
<div>
{Array(5)
.fill(0)
.map((_, idx) => (
<label key={idx}>
<input
type="radio"
name="rating"
onChange={handleRate}
value={props.ratingValue}
checked={idx === props.ratingValue}
/>
<FaStar color={idx < 3 ? "#01af93" : "#bbb"} />
</label>
))}
</div>
);
};
const Report = (props) => {
const { advices } = useSelector((state) => state.advice);
const [rate, setRating] = useState(null);
useEffect(() => {
if (!advices) {
dispatch(fetchAdvices(history));
}
});
useEffect(() => {
async function fetchRate() {
try {
const { rating } = await axios.get(http://localhost:8080/rating);
console.log(rating + "user rating");
} catch(error) {
console.log(error);
}
};
fetchRate();
}, []);
const handleRate = async() => {
const rate = await axios.post(http://localhost:8080/rating, {rating:rate, collegeId: collegeId});
props.setRating(rate)
}
return (
<>
<Container>
<Grid>
<Fragment>
<Grid >
<Card>
<CardContent><> <div>{advices[0}.college_name}
<StarRating setRating={(val) => setRate(val)} ratingValue={rate} />
</div></></CardContent>
</Card>
</Grid>
</>
)};
How to update values of rating based on collegeID from react code. The concept here is to update the value of rating based on the college name showed to user from the score he gets. College name is getting displayed but the value of rating is not getting displayed nor getting changed.

Answer 1

Code seems messed up during copy/paste, is this what you are trying to achive?
const StarRating = (props) => {
console.log(props)
// sends rating to database then updates the rating ui
const handleRate = async (ratingToSave) => {
const rate = await axios.post('http://localhost:8080/rating', {
rating: ratingToSave,
// collegeId should come from wherever stored
collegeId: collegeId
})
props.setRating(rate)
}
return (
<div>
{Array(5)
.fill(0)
.map((_, idx) => (
<label key={idx}>
<input
type="radio"
name="rating"
// idx+1 if minimum rating is 1
onChange={() => handleRate(idx + 1)}
value={props.ratingValue}
checked={idx === props.ratingValue}
/>
<FaStar color={idx < 3 ? '#01af93' : '#bbb'} />
</label>
))}
</div>
)
}
const Report = (props) => {
const { advices } = useSelector((state) => state.advice)
const [rate, setRate] = useState(null)
useEffect(() => {
if (!advices) {
dispatch(fetchAdvices(history))
}
// dependency array might need update, test first
}, [advices])
useEffect(() => {
async function fetchRate() {
try {
const { rating } = await axios.get('http://localhost:8080/rating')
console.log(rating + 'user rating')
} catch (error) {
console.log(error)
}
}
fetchRate()
// to rerender and refetch after user sends rating to database
}, [rate])
// jsx implement again
return (
<>
<StarRating setRating={(val) => setRate(val)} ratingValue={rate} />
</>
)
}