Two methods that pass the tests but still only one renders the correct UI

JavaScript
1

Tell us what’s happening:
Below are two snippets from the challenge. Both of them passes all the tests but I’m confused why only one renders the correct results that we want.

Your code so far

handleChange(event) {
  this.setState({
    input: event.target.value
  });
}

handleChange(event) {
    this.setState(state => ({
      input: event.target.value
    }));
  }

The last one doesn’t render the correct solution.
An important thing that I discovered that inside the setState argument the event object has all values null.
Your browser information:

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

Challenge: Create a Controlled Input

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/create-a-controlled-input

2

See this topic for the answer to your question.

1 Like