When a user types or deletes in the <input />, then that will trigger a change event, which will call handleUserInput. That’s good!
handleUserInput will set this.state.userInput equal to whatever text is currently in the input field. That’s also good!
There’s only one problem: you can set this.state.userInput to whatever you want, but <input /> won’t care. You need to somehow make the <input />‘s text responsive to this.state.userInput.
Easy enough! You can control an <input />‘s text by setting its value attribute.
Instructions
Inside of Input‘s render function, give <input /> the following attribute:
That should do it! An idiomatically correct React form!
This example doesn’t have a server per se, but any time that a user updates <input />, the new text is immediately stored in Input‘s state. We could easily connect that state with a server. What matters is that the text is sent somewhere to be stored on every character change.
Inside of the <h1></h1>, delete the text:
Replace it with:
Click Run. Try typing into the <input /> in the browser.