Controlled Forms

A controlled form is a form that derives its input values from state. While this means you have to type a bit more code, you can now pass the value to other UI elements too, or reset it from other event handlers.

For controlled inputs you will need a corresponding state and then a class method to update that state with changes. Form input values can be set to state values and then updated via React events.

To access the fields in the event handler, you can use the event.target.name and event.target.value syntax.

To update the state, you can use square brackets [bracket notation] around the property name.

In React:

• the value of a textarea is placed in a value attribute.
• the selected value is defined with a value attribute on the select tag: