Question about a Controlled Input in React JS

JavaScript
1

Tell us what’s happening:
Dear campers,

I have an understanding problem and would like to ask for your help.
As you can see the solution that I wrote for the create Controlled Input React JS challenge uses the method this.setState to update state.input property (that is an empty string) by concatenating it with event.target.value (the text written in the input element).
Using this solution when I am trying to type something in the input, the console throws an error and I really would like to understand why is it so?

Despite this error, I could pass the challenge with my solution and I already had a look in the hints that the state.input property should be updated in another way like: this.setState({
input: event.target.value
});

I was just wondering why my solution throws the error. What is wrong with it?

P.S. Sorry for a foggy description of a problem, I haven’t been talking or writing English recently.

Thank you in advance for your answers!

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // Change code below this line
this.handleChange = this.handleChange.bind(this)
  // Change code above this line
}
// Change code below this line
handleChange(event){
this.setState(state => {
  return state.input = state.input + event.target.value
})
}
// Change code above this line
render() {
  return (
    <div>
      { /* Change code below this line */}
<input type="text" value = {this.state.input} onChange = {this.handleChange}></input>
      { /* Change code above this line */}
      <h4>Controlled Input:</h4>
      <p>{this.state.input}</p>
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

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
3

Thank you very much for your answer. I got it!

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.