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:
The most efficient way to learn: Join a cohort with classmates like yourself, live streamings, coding jam sessions, live mentorships with real experts and keep the motivation.
From zero to getting paid as a developer, learn the skills of the present and future. Boost your professional career and get hired by a tech company.
Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.
Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.
Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.