Please house, I Want to overcome this challenge, what am I not getting right , assist me please

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}/>
   // 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 */}
<p>input</p>
<h4>input</h4>
<button onChange= {this.handleChange}>Change</button>        
{ /* change code above this line */}
       <h4>Controlled Input:</h4>
       <p>{this.state.input}</p>
     </div>
   );
 }
};

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10.0; S21 Plus) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.116 Mobile Safari/537.36 EdgA/45.07.2.5059.

Challenge: Create a Controlled Input

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

3

If what is going on is what you want to understand. then this is it,
This is a class component with the name ControlledInput (JSX),
From what I see there, the code needs some changes to be correct, The input tag in the constructor block needs to be in the return block after the h4 tag. The onChange event listener on the button tag need to be removed and put in the input tag, also, the handleChange function needs to be binded in the constructor because this is a class base component. After this is done, when you render this component on the brower, whatever you enter in the input field will be displayed in the p tag with this {this.state.input} below the h4 tag.
Hope this helps, Cheers

4

Thanks a lot, you have done me great favour.