Made withReactClip

Full React Tutorial #27 - Controlled Inputs (forms)

N

Net Ninja

Creator on the React channel

Watch on YouTube ↗

332K viewsJan 19, 20219:27 runtime

Learn how to manage web forms in React by implementing controlled inputs. This tutorial walks you through creating a form with text inputs, a textarea, and a select dropdown, teaching you to sync form field values with component state using the useState hook. Master the two-way…

Chapters

#react#clip#frontend

What are Controlled Inputs?

A controlled input is a React pattern for managing form data where the component's state serves as the "single source of truth" for the input field's value. This creates a two-way data binding: the state dictates what the input displays, and user interactions with the input update the state.

Note
This ensures that your React state and the DOM are always in sync, which is fundamental to building predictable UIs.

Implementing a Controlled Input

The process for any form element involves three main steps:

Create State: Use the useState hook to declare a state variable for the input's value.
- const [title, setTitle] = useState('');
Bind the Value: Connect the state to the input element by setting its value attribute to the state variable.
- <input type="text" value={title} ... />
Handle Changes: Use the onChange event handler to update the state whenever the user interacts with the input. The updated value is available via the event object at e.target.value.
- onChange={(e) => setTitle(e.target.value)}

Important
If you set the value attribute without providing an onChange handler to update the state, the input field will be read-only. The value is locked to the state, and there's no way for user input to change it.

Applying the Pattern to Different Elements

This powerful pattern is consistent across different types of form elements.

Textarea

The implementation for a <textarea> is identical to a standard text <input>.

const [body, setBody] = useState('');

<textarea
  required
  value={body}
  onChange={(e) => setBody(e.target.value)}
/>

Select (Dropdown)

The pattern also applies seamlessly to a <select> element. The value of the <select> tag corresponds to the value of the currently chosen <option>.

To set a default selected option, initialize the state with one of the option values.

// Initialize state to make 'yoshi' the default selection
const [author, setAuthor] = useState('yoshi');

<select 
  value={author} 
  onChange={(e) => setAuthor(e.target.value)}
>
  <option value="mario">mario</option>
  <option value="yoshi">yoshi</option>
</select>

Introduction to Controlled Inputs

Now I want to turn our attention to web forms in React so that a user can type in a new blog and add that. And later we'll send a post request so it adds it to the data. Now in order to do this we need to talk about controlled inputs and different form fields.

So controlled inputs are basically a way in React of setting up input fields in forms so that we can track their values. So if we had a text input field for example, a user can type into it and we can store that value of what they type in some kind of state. And we can also make it so that if the state changes, that in turn updates the value that we see in the input field. So we're always keeping the input field and our state in sync with each other. So let's try this out.

Building and Styling the Form Layout

So the first thing I'm going to do is create a bit of a template for this form. So let's open up our Create component and we're going to underneath the h2 add in a form. Now I'll get rid of the action because we're going to come to submit the form in another video, we don't need that for now. And then I first of all want a label for our first field. Now I'm going to get rid of that for attribute as well and we'll call this a blog title. So underneath this I want an input field and that's going to be of type text, but what I'm going to do is format this a little bit different. I'm going to put all the different property names or attributes down on a new line because there's going to be quite a lot of them as we go through this, and I don't want them to go off the page over to the right. So this is just easier for us to see. So the type is text. It's going to be required like so. And we'll come back to the rest later on.

Okay, so I'm now going to copy those two things and paste them in again because we need another input field for the content. So we'll say blog body this time for the label. And in fact, we're not going to use an input for this, we'll use a text area like so. And we're going to get rid of all of these things right here, we don't need any of those. And again I'm going to go to the next line and I'll say this is required. Now again we're going to add more properties down here later on. But for now let's move on and I'm going to do a final label and this is going to be for the author. So I'll say blog author like so. And for this we're going to use a select field, and this is so I can show you how to use controlled inputs with select as well. So I'm going to say right here select, and again we don't need the name or id, but inside the select I'm going to place in a couple of options. So the first option the value is going to be Mario and the text is going to be Mario. We'll just duplicate this and change Mario to Yoshi for the second option.

Okay, so that's our basic form. We'll also add a button at the bottom that just says Add Blog. All right, so if I save this now and preview it looks terrible. So let's add in a few styles to make it look better. first of all. So I'm just going to paste those from my repo, which is over here. Woohoo. So you don't have to watch me typing out all of the styles from scratch. Paste them at the bottom over here. So basically all we're doing is giving the whole thing a max width, aligning the text to the center. For the label we move the text back to the left. The H2, we give a font size and a color, some margin. These are the input fields, just to give them some margin, padding, a full size width, a border, etc. And then finally at the bottom, which we color this red color, the text of white, and no border, bit of padding, bit of border radius, and cursor pointer. So very, very, very simple styles. And now it looks a bit better.

Implementing a Controlled Text Input

So we could type in a lot of stuff in here, but currently when we do that, we're not keeping track of what a user types into them or what a user selects right here. So that's the whole aim of this, that's what we want to do. If I was to start typing for example welcome in here, I want to be able to track that value and store it in some state inside this component so we can do something with that data later on.

So how do we do this? Well, first of all, we need to set up some states for this. So at the top over here, I'm going to make some room and then say const and create some state called title to track the title. And we need a function to change that. We set it equal to useState, press enter to auto import it at the top, and the initial value of this is going to be an empty string.

Now what I'm going to do is associate this value with the value of this input. So to do that, I'm going to come to the next line and say value is equal to a dynamic value, so curly braces, and it's going to be this title state right here. Now whatever this is, it will show inside this. Now at the minute, it's an empty string. If I save this, we don't see anything. If I then change this to hello, save it, then we see hello. But if I try to change it, I can't. Nothing happens. I can't delete it. I can't add anything else. And that's because it's always showing the value of this. So it won't let me change the value of the input. So what we need to do is make it so that when we try to change this, it triggers this thing right here, this function, and updates it with whatever we're trying to change it to.

So the way we do that is by using the onChange event, and we set that equal to an anonymous function first of all, which then invokes setTitle. So we're going to change the title when we try to change the input value. Now inside here remember we get access to the event object and we want to update whatever this is with whatever we're trying to type in here. And we can get that from the event object by saying e.target and the target is this input element right here and then .value. So that's whatever we're trying to type into it. So if I save this now, when I type into the input field it's going to trigger this and it's going to update the state of the title. I'm going to set it equal to be an empty string to begin with. It's going to update that every time I type it in to match what I'm typing in here. And then vice versa, the value of the import is going to match that. So now we have this kind of two-way binding. So if I save this now and start to type it in, it works. But also, I want to see that. So what I'm going to do is then also output this at the bottom so we can see it. So paragraph tag and then I'll just output right here the title like so. So save it and to begin with if we refresh, we see the title is empty. As I start to type, we can see update down here as well. So now we're tracking what a user types into this field.

Controlling a Textarea Element

We need to do the same though with the other ones. So let's create some state for the body. I'm going to duplicate this, change this to body and also this to setBody. And down here for the text area, we can do the same thing. The value is going to be equal to body. And then we also need the onChange event. And that's equal to an anonymous function, we're taking the event object, and then inside this function we call setBody and we're passing e.target.value. So exactly the same. And also we can output the body at the bottom down here. So paragraph tag curly braces and then body like so. Save it, and then let's come over here. I'm going to refresh. Title and body. So that's working.

But what about select fields? Well, very, very similar. Let's create some more state for this. So I'm going to say const and this time we're going to call it author and setAuthor like so, and set that equal to useState. And the initial value of this this time is going to be one of these things because I want one of those to be the initial value selected. So let's say Mario. And then down here we can come to the select button or the select field rather, and we need to add on a value. So we'll say value is equal to author. And then also we need an onChange. Set that equal to a function where we're taking the event object. Inside that we call setAuthor and in here we're passing e.target.value. So exactly the same as the other fields.

So let's also output the author down here just to make sure this works. Save it. And now if we come over here, refresh, we can see Mario is auto selected. If we change the initial one to Yoshi by the way, then Yoshi will be the first one to be selected. If we refresh, however you see is what I put so let's change this to Yoshi. Save it, and now we can see Yoshi is auto selected right here. I can change it to Mario though. Blog title hello ninjas, and then the blog body, load of stuff right here. Alright then, so next up, I'm going to show you how we can submit this form.