Please assist: unable to solve the React: create a controlled input challenge

JavaScript
1

Tell us what’s happening:: I am unable to solve the React: create a controlled input challenge. My code (shown below) keeps generating this error message:
controlled input should generate a div element which contains an input and a p tag. Typing in the input element should update the state and the value of the input, and the p element should render this state as you type.

Your code so far


class ControlledInput extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // change code below this line
 <input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>

  // change code above this line
}
// change code below this line
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}

// change code above this line
render() {
  return (
    <div>
      { /* change code below this line */}
      <div>{this.state.input}<p></p></div>
  
      { /* 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 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

Hello!

Well, the problem is that your input is in the wrong place:

constructor(props) {
  super(props);
  this.state = {
    input: ''
  };
  // change code below this line
 <input value = {this.state.input} onChange = {this.handleChange.bind(this)}/>

  // change code above this line

No HTML code should go inside the constructor, that should go on the render method.

What you should write inside the constructor (which you partially did), is the bindings between the input elements (be it a textarea, a select or any other form element) and the class:

this.methodThatHandlesAnInputEvent = this.methodThatHandlesAnInputEvent.bind(this);

The challenge states:

Besides, there’s no need to add a div nor a p.

Now, try to solve the problem with the information I gave you and come back if you need further assistance :slight_smile:.

1 Like