Simple setState on object using hooks

Question

const [state, setState] = useState({ city: '', country: '' });

const handleCityChange = event => {
  setState(prevState => {
    console.log(prevState);
    return { ...prevState, city: event.target.value };
  });
};

//...

<input
  type="text"
  placeholder="city"
  value={state.city}
  onChange={handleCityChange}
/>

I'm trying to destructuring prevState, which is an object, and update only the city property. On first keystroke, it's working fine without error, but as soon as I'm typing second letter, i will hit error

Uncaught TypeError: Cannot read property 'value' of null

May I know which part is the null coming from? And from chrome console I see below warning not sure if it's related

Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property target on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See https:...//react-event-pooling for more information.

UPDATES: If we're not using setState functionally, then it's working fine?

const handleCityChange = event => {
  setState({ ...state, city: event.target.value });
};

Tholle · Accepted Answer · 2019-04-04 08:33:33Z

1

An event has to be handled synchronously in React. You can extract the value from the target before you call setState:

const handleCityChange = event => {
  const { value } = event.target;
  setState(prevState => {
    return { ...prevState, city: value };
  });
};

Another way of going about it is to persist the event, and it can be used asynchronously.

const handleCityChange = event => {
  event.persist();
  setState(prevState => {
    return { ...prevState, city: event.target.value };
  });
};

answered Apr 4, 2019 at 8:33

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Isaac Over a year ago

I just found out that without using functional setState, the problem will be eliminated? May I know how are they in different, if you care to explain a lil bit more about what's going on between them?

Tholle Over a year ago

When you give a function as argument to setState, that function will be invoked asynchronously by React. Trying to dereference event.target.value in that function will not work, since you cannot use the event asynchronously.

Isaac Over a year ago

Sort of getting the picture now. Gonna take some time to digest it. Thanks a lot!

Collectives™ on Stack Overflow

Simple setState on object using hooks

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related