Can you tell me what is wrong with this?

Tell us what’s happening:

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){
  const [name,value]=event.target
  this.setState({
    [name]:value
  })
}
  // change code above this line
  render() {
    return (
      <div>
        { /* change code below this line */}
        <input 
        type="text"
        name="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 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0.

Link to the challenge:

const [name, value] = event.target

This says that the value of event.target is an array with two items, and you’re assigning them to the variables name and value respectively. This isn’t correct: you are extracting the fields of an object, so it should be {name, value}

Also, this seems unecessarily complex: why not just set the state’s input property to event.target.value? You don’t need to compute the name of the property, you already know it.

Destructuring went wrong under handleChange

thanks brother, I got it.

1 Like