Can you tell me what is wrong with this?

JavaScript
1

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:

2 
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.

3

Destructuring went wrong under handleChange

4

thanks brother, I got it.

1 Like