Please help i am stuck on 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
<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 */}
    
      { /* 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.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.75 Safari/537.36.

Challenge: Create a Controlled Input

Link to the challenge:

2

Hi @arpit.mishra306 it seems you haven’t added any code here

that’s why you are getting error or you are not able to write an answer for challenge?

3

i cant understand this weird challenge!

4

you are supposed to return the div element with input and p tag.

What I got from running your code you are missing those 2 elements.

As for explanation i haven’t done this course so can’t help you much on this but i would suggest that you should read through the content provided on left hand side it will definitely help you understand the concept

5

The input tag belongs in the render method, not into the constructor. In the constructor, you just bind the method to your class.

Also note that in React, events are written in camelCase (onChange). The whitespace in that input tag is a bit off, too.