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
Easy enough! You can control an
<input />‘s text by setting its
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
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:
I am an h1.
Replace it with:
Click Run. Try typing into the
<input /> in the browser.