Intro to Controlled Inputs With React Hooks

Photo by Victor Barrios on Unsplash

I recently built an app for my family and friends called Nalarama, and I was reminded of how useful controlled forms are. In my app, I ask users to make multiple guesses on my puppy’s mix of breeds, which requires multiple inputs. With controlled form inputs, the value typed into the input is easily accessible, and I was able to effortlessly use those values in HTTP POST requests, and also in JSX elements wherever I deemed necessary.

This post will be a glimpse into controlled inputs, and will demonstrate what that looks like when using React Hooks.

First and foremost, when I was learning about controlled inputs, it was hammered into my brain that a controlled form has — “inputs which get their value from state” — and then we had to repeat that sentence like 10 times in a row.

The reason I think my teachers saw this necessary was because this is the principal concept behind controlled forms. As the input is being typed into, we will have a function which updates a state variable. The input will get it’s value from the updated state variable which is constantly changing with every keystroke. It is a very responsive, and “controllable” input, which comes in handy from time to time.

Let’s look at an example which attempts to demonstrate this as simply as possible:

This is a component I’ve appropriately named ControlledInput which holds my “form”. Let’s briefly discuss what goes on inside of this component.

The important thing happening here is lines 8 through 13, the input. This is a text input, and as you can see, it gets it’s value from our state variable, someValue. In the onChange prop, we use setSomeValue as a callback function to set someValue to whatever has been typed every time it changes. We access that value through the event object: event.target.value.

Let’s see what this looks like in real time:

Here I have the React dev tools pulled up so you can see that every time a letter is typed, the state changes. This allows me to use that state to create an <h2> element with someValue inside it (inside the green box).

To clean up the onChange prop, we can extract the function inside out to a handler, like so:

This gives us the same result, but having a handler looks better and cleans up the input props.

Conclusion

This has been a very quick intro to controlled forms using React Hooks, I hope it was beneficial to you to read it! Controlled inputs are a great way to have a variable which can access the value being typed into it quickly, and effortlessly.

As always, happy hacking!

--

--

--

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Type =internal Server Error 500 , MyBatisExceptionTranslator.

Headless WooCommerce & Next.js: Set up styled-components with TypeScript and Next.js

How to Setup Path Resolving in Vite

How Make A Native Server Using Node and Express ?

npm init

Why Vue is (by default) more performant than React.

Build a Bulk Order Form using the BigCommerce Storefront API and React

KWoC 2017 — Project Report

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tyler J Funk

Tyler J Funk

Full Stack Web Developer && Creative Thinker && Flatiron School Grad && Continuous Learner

More from Medium

Create dark mode structure in React projects (using Tailwind CSS, Typescript, and Custom Hook)

React Router

What are React Functional Components?

Re-assigning a value to UseParams hook using useState hook.