Question about a Controlled Input in React JS

JavaScript
2

Hi,

Firstly, this is not a correct way of using this.setState

this.setState(state => {
  return state.input = state.input + event.target.value
})

You can either pass to it a new state object:

this.setState({
  input: newValue
});

or pass a function that as a first argument accept previousState and must return a new state object:

this.setState(prevState => {
  return {
    input: newValue
  };
});

What is the difference between passing an object or a function in setState ?

The error in the console that you're getting:

Uncaught TypeError: Cannot read property ‘value’ of null

This is caused by Event Pooling, I have described this issue in this post:

1 Like