4Geeks logo
4Geeks logo


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.

Coding Bootcamp

Learn live

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.

Upcoming live events

Learning library

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

LoginGet Started
← Back to Lessons
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// Assuming you have this input with the ID=first_name: 2<input type="text" id="first_name" /> 3 4// With JavaScript you can use: 5const 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 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.

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}>Click to validate empty</button> 10 </div>; 11}

You can see a live example here:

Click to expand