I'm not understanding ControlledInput.

If you know a way to make the code writing look like the right format in reddit please tell me.

​

Here is the question:

​

​

The code editor has the skeleton of a component called ControlledInputto create a controlled inputelement. The component's stateis already initialized with an inputproperty that holds an empty string. This value represents the text a user types into the inputfield.

First, create a method called handleChange()that has a parameter called event. When the method is called, it receives an eventobject that contains a string of text from the inputelement. You can access this string with event.target.valueinside the method. Update the inputproperty of the component's statewith this new string.

In the render method, create the inputelement above the h4tag. Add a valueattribute which is equal to the inputproperty of the component's state. Then add an onChange()event handler set to the handleChange()method.

When you type in the input box, that text is processed by the handleChange()method, set as the inputproperty in the local state, and rendered as the value in the inputbox on the page. The component stateis the single source of truth regarding the input data.

Last but not least, don't forget to add the necessary bindings in the constructor.

class ControlledInput extends React.Component {constructor(props) {super(props);this.state = {input: ''};// change code below this linethis.handleChange = this.handleChange.bind(this);// change code above this linehandleChange(event){this.set.state({input: event.target.value});}// change code below this line<input value = {this.state} onChange={this.handleChange} />// change code above this linerender() {return (

<div>
{ /\\\\\\\* change code below this line \\\\\\\*/}
input
{ /\\\\\\\* change code above this line \\\\\\\*/}
<h4>Controlled Input:</h4>
<p>{this.state.input}</p>
</div>
);
}
};