Event target is null inside functional setState

Question

Imagine below function of some component:

handleInputChange(e) {
    // let val = e.target.value; - if I uncomment this, it works.

    // Update text box va         


        

Answer 1

That is because of React doing event pooling - all the event's fields get nullified after the callback is done, so you observe them as nulls in the asynchronous setState callback.

Please copy your event data to a variable or call event.persist() to disable this behavior.

handleInputChange(e) {
  e.persist();

  this.setState(function (prevState, props) {
      return {
        searchValue: e.target.value,
      }
  })
}

Or:

handleInputChange(e) {
  const val = e.target.value;

  this.setState(function (prevState, props) {
      return {
        searchValue: val
      }
  })
}

Please see the following example:

class Example extends React.Component {
  constructor() {
    super()
    this.state = { }
  }
  
  handleInputChangeCopy = (e) => {   
    const val = e.target.value;
    
    console.log('in callback');
    console.log(e.target.value);
    
    this.setState(function (prevState, props) {
        console.log('in async callback');
        console.log(val);
        
        return {
          searchValue: val
        }
    })
  }
  
  handleInputChangePersist = (e) => {
    e.persist();
    console.log('in callback');
    console.log(e.target.value);
    
    this.setState(function (prevState, props) {
        console.log('in async callback');
        console.log({ isNull: e.target === null })
        
        console.log(e.target.value);
        
        return {
          searchValue: e.target.value
        }
    })
  }
  
  handleInputChange = (e) => {
    console.log('in callback');
    console.log(e.target.value);
    
    this.setState(function (prevState, props) {
        console.log('in async callback');
        
        console.log({ isNull: e.target === null })
        console.log({ event: e });
        
        console.log(e.target.value);
        
        return {
            searchValue: e.target.value
        }
    })
  }
  
  render() {
    return (
    

      
Copy example
      
      
      
Persist example
      
      
      
Original example - please note nullified fields of the event in the async callback. Breaks the example, please re-run after a Script error
      

      

    
    )
  }
}

ReactDOM.render(
  ,
  document.getElementById('app')
)