For all the self-taught geeks out there, here our content library with most of the learning materials we have produces throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Machine Learning Engineering (16 weeks)
Full-Stack Software Developer
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
This lesson is more about how to work with inputs in react than what is a controlled input. It's better to explain the reasons we need it and why controlled inputs are 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: