React - Create a Controlled Input

Tell us what’s happening:
Describe your issue in detail here.
Can’t figure out the mistake.

  **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(){
this.setState(event =>({
  input: event.target.value
}))
}
// Change code above this line
render() { 
  return (
    <div>
      { /* Change code below this line */}
      <input value={this.state.input} onChange={this.handleChange}/>
      { /* 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/103.0.0.0 Safari/537.36

Challenge: React - Create a Controlled Input

Link to the challenge:

Hey! the problem seems to be on this segment of your code.

You’re passing event as a parameter to the setState function however, the setState function is not an event handler. you need to pass the event object to the handleChange function instead.

Hope this helps! :smile:

1 Like

You may also want to read the note at the bottom of the hint page.

BTW, as long as you call it event inside the handler you should actually have access to the event object without using a parameter.

handleChange() {
  console.log('event', event) // the event object should be logged
}

But your event inside the setState updater function isn’t the event, it is the current/previous state.

  handleChange() {
    this.setState(state => {
      console.log('state', state)
    })
  }
1 Like

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