← Back to Lessons
Edit on Github

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

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.

Inputs in Vanilla.js simple Javascript

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

// Asuming you have this input with the ID=first_name: <input type="text" id="first_name" /> // With javascript you can use: const 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 using the famous state.

What is a Controlled Input

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:

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

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:

const AnyComponent = () => { const [inputValue, setInputValue ] = useState(''); const validateInput = () => { if(inputValue === "") alert("The input cannot be empty")); } return <div> <input type="text" onChange={e => setInputValue(e.target.value)} value={inputValue} /> <button onClick={validateInput} </div>; }

You can see a live example here:

Click to expand


Subscribe for more!


COMPANY

ABOUT

CONTACT

MEDIA KIT

SOCIAL & LIVE LEARNING

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.

INTRO TO CODING

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.

DATA SCIENCE

Start a career in data science and analytics. A hands-on approach with interactive exercises, chat support, and access to mentorships.

30DAYSOFGEEKCODING

Keep your motivation with this 30 day challenge. Join hundreds of other developers coding a little every day.

A.I. & MACHINE LEARNING

Start with Python and Data Science, Machine Learning, Deep Learning and maintaining a production environment in A.I.


©4Geeks Academy LLC 2019

Privacy policies


Cookies policies


Terms & Conditions