TypeError: evt.target is null in functional setState

These are two different syntaxes for setState

First:

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

uses the updater function as the first argument.

Second:

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

uses the object to be updated

When using the synthetic event in the updater function you need to use event.persist()

From the documentation:

the SyntheticEvent is pooled. This means that the SyntheticEvent object
will be reused and all properties will be nullified after the event
callback has been invoked. This is for performance reasons. As such,
you cannot access the event in an asynchronous way.

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.

Your fist case would look like

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

Or instead of using event.persist() you could store the event in another object

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

P.S. You should use the updater function for setState only when you wish to update the current state based on prevState or props

CodeSandbox

Leave a Comment