Kevin.a :
I have a default state that looks like this:
const [selectedFilters, setSelectedFilters] = useState({movie: 'default' , species : 'default' , planet : 'default'});
How do I update the movie value to something else. I tried this :
const handleMovieChange = (e) => {
console.log(e.target.value)
setSelectedFilters(prevState => ({ ...prevState, movie : e.target.value}));
}
However when I change values this gives me :
×
TypeError: Cannot read property 'value' of null
(anonymous function)
C:/Users/klmaa/OneDrive/Bureaublad/swcase/client/src/App.js:48
45 |
46 | const handleMovieChange = (e) => {
47 | console.log(e.target.value)
> 48 | setSelectedFilters(prevState => ({ ...prevState, movie : e.target.value}));
| ^ 49 | }
50 |
51 | console.log(selectedFilters);
ggorlen :
You don't need the arrow function here. Simply access the normal object selectedFilters
and pass the updated value for movie
along, creating a new object, and pass this new object to setSelectedFilters
:
setSelectedFilters({...selectedFilters, movie: e.target.value});