Question

67

Event target is null inside functional setState

rated 0 times [ 69] [ 2] / answers: 1 / hits: 24743 / 7 Years ago, thu, june 22, 2017, 12:00:00

Consider below function of some component:

handleInputChange(e) {

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



    // Update text box value

    this.setState(function (prevState, props) {

        return {

          searchValue: e.target.value,

        }

    })

}

and an input, which is rendered by a child component of above component, and receives handleInputChange as props:

<input type="text" onChange={that.props.handleInputChange} value={that.props.searchValue} />

When I enter something in input I get error that Cannot read property 'value' of null.

If I uncomment the first line inside handleInputChange function, where I store input value inside val variable, it works well. Ideas why?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 7 Years ago emanir · Accepted Answer

That is because react before version 17 was 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 (

    <div>

      <div>Copy example</div>

      <input 

        type=text

        onChange={this.handleInputChangeCopy} 

      />

      

      <p>Persist example</p>

      <input 

        type=text

        onChange={this.handleInputChangePersist} 

      />

      

      <p>Original example - please note nullified fields of the event in the async callback. <small>Breaks the example, please re-run after a Script error</small></p>

      <input 

        type=text

        onChange={this.handleInputChange} 

      />



      <div style={{height: 300}} />

    </div>

    )

  }

}



ReactDOM.render(

  <Example searchValue={test} />,

  document.getElementById('app')

)

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js></script>

<script src=https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js></script>

<div id=app></div>