This lesson is more about how to work with inputs in react than what is a controlled input its better to explain the reasons we need it and why controlled inputs is considered the best approach in React.js applications.
But with React the solution is not that simple; the only way to keep data that may change over time inside react components is using the famous
A controlled input is just another input with the difference that the value of it is in sync with the state of a component, something like this:
When you use the input property
onChange together with the property
value you are basically forcing the input's value to be completely in two-way sync with the hooked state variable
inputValuevariable gets updated => the input will also change its value.
A controlled is not the only way to access and/or update the value of an input, you can also use the
useRef hook and try to manipulate the input the traditional way, using DOM, but long term, it will end up being more complicated and harder to maintain that controlled inputs.
Also, a controlled input gives you many additional benefits like immediate access to the input value for validations, an instant update of the input, etc.
Once your controlled input is ready, the validations are simple because now you have the
inputValue variable at your disposal; for example, if you want to validate that the input is not empty when a button is clicked, you can do something like this:
You can see a live example here:
All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.