CODEWITHSUNDEEP
javascriptreactjsstate
Kevin.a
Kevin.a

Reputation: 4306

How to update state with the useState hook

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);

Upvotes: 3

Views: 66

Answers (2)

Siva Kondapi Venkata
Siva Kondapi Venkata

Reputation: 11011

BTW, Based on React documentation, Its advised to split into multiple state variables. https://reactjs.org/docs/hooks-state.html#tip-using-multiple-state-variables.

Following should work for your scenario. 

const [movie, setMovie] = useState("default");
const [species, setSpecies] = useState("default");
const [planet, setPlanet] = useState("default");

const handleMovieChange = e => {
  console.log(e.target.value);
  setMovie(e.target.value);
};

Upvotes: 1

ggorlen
ggorlen

Reputation: 57259

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});

Upvotes: 2

Related Questions