TypeError: evt.target is null in functional setState

Question

What\'s the major difference bewteen these two functions?

handleOnChange(evt) {
    this.setState(() => ({
        tickerName: evt.target.value
    }));
}         


        

Answer 1

React wraps events in its own SyntheticEvent which will be reused and all properties will be nullified after the event callback has been invoked (see react docs).

According to react docs, one can't access react SyntheticEvent in an asynchronous way and setState is async. So when setState is executed your evt might be null because it gets reused by react. Since the first function uses a callback with access to previous state in setState, by the time the callback is executed the event evt is reused and nullified by react. In the second case the update object with the event value is created right away and passed in directly and it doesn't create a similar problem.

If you need to use setState with a callback you need to take care of the event possibly being null when the callback is executed. One way of dealing with this would be store the original reference to target outside of setState it will get scoped and used inside setState. Like this:

handleOnChange(evt) {
    const target = evt.target;
    this.setState((prevState) => ({
        tickerName: target.value
    }));
}

I wrote a more detailed answer to why react events get null in setState here.