React HTML select element onChange function, trying to access 'event.target.value'

Answer 1

Here event (onChange) is a synthetic event. React re-uses synthetic events, which means when the function execution completes, it nullifies the event properties in the event pool.

Since setState is async and event gets nullified after onChange is invoked, directly accessing event properties (i.e event.target.value) within the async callback won't work.

One way is to store the value from a synthetic event into a variable like:

function changeSelect(event) {
  const newValue = event.target.value; // reference
  setNestedState((prevState) => {
    return({
      ...prevState,
      propA: newValue // can use event properties
    });
  });
}

Another way to make it work asynchronously is to use event.persist().

From the docs,

If you want to access the event properties in an asynchronous way, you should call event.persist() on the event, which will remove the synthetic event from the pool and allow references to the event to be retained by user code.

function changeSelect(event) {

  event.persist();   //This will persist the event

  setNestedState((prevState) => {
    return({
      ...prevState,
      propA: event.target.value
    });
  });
}

Demo