Controlled Components

State changes

In order to portray state changes within form fields and transfer changes made by users in form fields into the state, a controlled component is needed. React fully takes care of the state handling of these form elements. We transfer a value to the value attribute which we receive from the state and also derive the changed value and pass it back to the state.

React state is seen as a single source of truth (or a similar state container like Redux). The only relevant value is the one that can be found in the React state, and the corresponding input in a form will constantly reflect this value in the state.

Let’s take a look at an example to illustrate this better: