Changing of Values

If a value is modified, as is the case with text inputs and radio buttons, the corresponding React state is set to the value provided by the user, triggered by the onChange event. Controlled components now mandate the following procedure:

1. When the user inputs text, the value changes.
2. The onChange event is triggered and processed by the event handler.
3. The event handler sets the state using the new value.
4. React re-renders the user interface and sets this.state to the new value.
5. The user sees their newly provided value on the screen.

This looks normal to the user, and they will not notice that the form works differently behind the scenes and does not reflect usual browser behavior. React fully takes care of the logic in the background and paints a new frame in the user interface.

...