Create a Form with Controlled Inputs in React
We always want our rendered UI to be a function of our state. In order for that to hold, we need to control the rendered value of form inputs by making them controlled inputs. In this lesson, we'll create a form and use component state and event handling to maintain the input value in component state and control the rendering of our inputs based on that state.
Instructor: [0:00] Let's start off by creating a new file in the components directory and we'll call this card form. In here we're going to import React from React. Then we're going to export a function called card form. This is going to be a component, so it's going to accept props.
[0:22] Then we need to return some JSX. For now, let's start with a div. I'm going to give it the class name of title. I'll just throw some placeholder text in there for now and I'll save this.
[0:38] Now I'm going to open app.js and I'm going to import card form from components card form. With that imported I'm going to scroll down to app's render and just before the mapping to go over the cards, I'm going to put an instance of card form in here. I'll save this.
[1:03] Now let's run this in the browser with yarn start. We'll see that our component shows up in our grid just before our cards. Now that we know it's showing up, let's go back to card form and flesh this out.
[1:18] Let's start by removing this placeholder text and opening up a form. Inside the form I'm going to create a div and this div is going to hold our first label and input. We're going to have a label and we're going to give this the HTML for attribute so that we can associate our label with our input.
[1:37] We'll call this card_term and then the label's text will just be the word term. Then we'll create a text area with the ID of card_term. This will create the association between this text area's ID and the label's HTML for value.
[1:56] Now we're going to have a second div with a label and an input for the definition, so I'm just going to duplicate this one. Instead of card turn this time, it'll be card_definition. Our label text will be definition. Then we're going to add a third div and this is going to contain our buttons.
[2:18] Here we're going to have a button of type submit with the text save. Then we'll have a second button with the type of reset with the text cancel. We're going to add a little bit of styling to this, so my div is going to have a class name and we'll just call that buttons.
[2:41] Each of these buttons will have a class, so we'll have a class name on the save button of primary and a class name on the reset button of secondary. At this point let's save this and let's take a look in the browser.
[2:57] When this reloads we'll see that we have our form and our label should be associated with our inputs and we have our save and cancel buttons. Everything looks good, but now we need to associate the inputs' value with React state so that React has control over the rendering of our UI.
[3:16] Let's go back to our code. Up at the top of this card form function we're going to create some state for React to maintain these values. I'll define a constant and I'm going to destructure this state array. This is going to be term and set term. We'll have a piece of state that tracks the value of the term input. This will be React dot use state.
[3:39] This is a string value so our default value is going to be an empty string. Then I'm going to create a function called handle term change. That's going to receive an event object. Then we're going to use this to update our text.
[3:54] We'll come down here to our first text area and we're going to give this an on change prop. On change is going to point to handle term change. When a change event is fired it'll be received by this function and we're going to destructure the value key from event.target. That's going to give us the value of the input and then we're going to use that to set the term.
[4:23] Then back in our text area we're going to use that as the value for our text area. We'll use the value prop and we're going to parse it term. I'll go back to the browser and I'm going to open up the dev tools. I'm going to go to the components dev tools from React dev tools. We're going to look at card form and we'll see that we have some state here.
[4:47] Now when I type into term, we should see this value reflected in the state. Now we want to go back to our code and we want to do the same thing for our definition. We're going to duplicate this and we're going to have a definition and just shorten it to def and set def. That will start as an empty string. Then we can have a handle definition change or handle def change.
[5:17] Then we'll call the right setter here. Then down in our text area for the definition we're going to give this a value that will be the def value from our state and then on change. That will be handle def change. We'll save this and go back to the browser.
[5:41] If we look, now we have two state values. One will reflect the term and the other will reflect the definition. Now the UI that we see here is always a reflection of state that React knows about.