Why React Component Is Changing an Uncontrolled Input to Be Controlled
And Bonus Tip to Optimize Your React Component
In React, we frequently use the local state to store and process input text. However, this is what causes the error A component is changing an uncontrolled input to be controlled.
Controlled vs uncontrolled input
Controlled input is a component whose value is controlled by React.
The local state processes the input and displays the current state.
At the same time, an uncontrolled component processes the input and displays the value using standard browser mechanisms.
The core difference is who controls the presentation of an input’s value.
To control the state of the input, we construct a local state and assign its value to the input’s value, then send the function for input processing to onChange.
This is an example of a standard controlled input. In this case, we’ll receive an error message in the console: A component is changing an uncontrolled input to be controlled..
