Explore our extensive collection of courses designed to help you master various subjects and skills. Whether you're a beginner or an advanced learner, there's something here for everyone.
Join us for our free workshops, webinars, and other events to learn more about our programs and get started on your journey to becoming a developer.
For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
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
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 by using the famous
A controlled input is just another input with the difference that its value 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
onChangefunction gets called => the
inputValuewill be updated.
inputValuevariable gets updated => the input will also change its value.
A controlled input 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 in the long term, it will end up being more complicated and harder to maintain than 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: