Member-only story
How to Handle Forms With React
Handling input changes by writing controlled components
In this article, we’ll look at how to handle forms with React.
Form Handling
The standard way to handle form input value changes is to handle them with React. This is a technique called controlled components.
We can create controlled components with input, textarea, and select elements. They maintain their own state, and updates are based on user input.
Like with anything else, the component state is updated with setState(). This means that we have to call it with the value of the input elements to update the state with the inputted values.
To update the state with the inputted value, we can write the following:
In the code above, we have the input element that has an onChange handler which is set to this.handleChange. The handleChange method has the code to update this.state.name with the latest inputted value. event.target.value has the latest value.
