I am very new to React and trying to implement the Rating feature in the code. Can anyone tell, why I am Getting TypeError: Object(...) is not a function error when trying to change a state property when the Rating component onChange property is set.
My code
export default function Details(props) {
const [movie_detail, set_movie_detail] = useState({
poster_url:"",
artists:[],
title:"",
genres:[],
duration:0,
release_date:"",
rating:0,
storyline:"",
id:"",
wiki_url:"",
trailer_url:"",
censor_board_rating:""
});
async function data(){
const data = await fetch(props.baseUrl + "movies/"+props.match.params.id ,
{
method: "GET",
headers: {
"Content-Type": "application/json",
"Cache-Control": "no-cache"
}
});
const rawData = await data.json();
set_movie_detail(rawData);
}
const handleRatingChange = (value) =>{
console.log(value);
setState({rating:value});
}
useEffect(() => {
data();
}, []);
return (
<>
<Header baseUrl={props.baseUrl} movieid={movie_detail.id} ></Header>
.........
<div className="column3">
<Typography>
<b>Rate this movie</b>
</Typography>
<Rating
name="rating"
value={movie_detail.rating/2}
max={5}
onChange={handleRatingChange}
icon=
{
<StarBorderIcon
style={{color:"black"}}
/>
}
/>
</div>
</>
);
}
You should be using the correct name of the function that updates the state. In this case set_movie_detail instead of setState.
You should also merge the update with the previous state instead of overwriting it.
Your function should be as follow:
const handleRatingChange = (value) => {
console.log(value);
set_movie_detail((prevState) => { ...prevState, rating: value });
}
You should be using set_movie_detail instead of setState whilst trying to update the state value.
const handleRatingChange = (value) =>{
console.log(value);
set_movie_detail(prev=>{...prev,rating:value});
}
set_movie_detail is the function that updates the state of movie_detail.
Here, we are making use of the spread operator ... to ensure that only the desired attribute(s) (rating here) is overwritten and the rest of the values remain the same.