4Geeks logo
4Geeks logo
About us

Learning library

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.

Full-Stack Software Developer

Data Science and Machine Learning - 16 wks

Search from all Lessons

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.

← Back to Lessons

Continue learning for free about:

Edit on Github

What are controlled and/or uncontrolled inputs in React.js

Inputs in Vanilla.js simple Javascript

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.

Inputs in Vanilla.js simple Javascript

If you want to retrieve an input value in simple Javascript/HTML you can do something like this:

1 2// Assuming you have this input with the ID=first_name: 3<input type="text" id="first_name" /> 4 5// With javascript you can use: 6const value = document.querySelector('#first_name').value;

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 state.

What is a Controlled Input

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:

1const AnyComponent = () => { 2 const [inputValue, setInputValue ] = useState(''); 3 4 return <input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} /> 5}

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 inputValue.

  1. If the onChange function gets called => the inputValue will be updated.
  2. If the inputValue variable gets updated => the input will also change its value.

Why use controlled inputs?

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.

Validating Inputs in React with controlled inputs

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:

1const AnyComponent = () => { 2 const [inputValue, setInputValue ] = useState(''); 3 4 const validateInput = () => { 5 if(inputValue === "") alert("The input cannot be empty")); 6 } 7 return <div> 8 <input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} /> 9 <button onClick={validateInput} 10 </div>; 11}

You can see a live example here:

Click to expand