React Forms — Class vs. Functional

Let’s get started!

First, let’s create our React app. After you have installed React, you can run the command — “create-react-app” — in your terminal, followed by the name of the application you want to create. This will build your React app and include all of the necessary functionality to get you off and running. In your terminal type the command “cd” into your app and start it by using the command — “npm start.”

• create-react-app react_forms
• cd react_forms
• npm start

Next, let’s create our new component.

We will create a new file ClassComponentForm.js, then we always need to import React.

Next let’s create our class component.

Our form is going to be simple. We will have a name, an email, zip code, and a date.

First, I am going to create an empty form, called emptyForm and set our form attributes to be equal to an empty string.

Then, I will create a componentDidMount function that will set the state of my component to the empty form I just created.

Now, let’s begin making our form.

Here is our first input.

• htmlFor= in the label, which normally in JS is just for=, this looks for a matching id on the input, that’s how they are associated.
• The id is how our label is associated with our input.
• The name attribute needs to be the same as the key in your form. If you want to change the state of {name: ‘ ‘} then you need to make sure your inputs name matches your state (which in this case just happens to be name as well.)
• The type attribute specifies the type of <input> element to display.
• The placeholder is the text that appears in the input before the user types.
• The value needs to be set as our state at name. Therefore, “this.state.___” should be the same as the name attribute value.
• onChange will accept a function that is called when the user types anything into the input.

Now we need to make an onChange function that will update our forms state to reflect the user input.

And update our onChange in our input.

Now our name input reflects the user’s input we can go ahead and make the rest of our form.

Our form is a little lackluster so let’s give it some CSS.

We will make a ClassComponentForm.css file. Here is our css file.

And here is how our new form looks.

Right now our form is permanently on the screen, we don’t want that, so let’s go ahead and make a button that we will press and it will show our form. For this we are now going to head to our App.js file and make some changes.

We are going to skip over a few things now that should make sense as we get into the functional component form.

Same as before we will import react and then create our component like this:

Looks fairly similar to our class component, but we lose the render and just have a return. Also no more “this.state, this.props.” Instead you will pass props down as an argument and call “props.___”

As well, we now have access to hooks. Hooks are functions that will allow us to ‘hook’ into React state and lifecycle features from function components. We are importing useState which allows us to use the built in state hook from react. useState is essentially the same as setting our state in a class component. We will create a function that can access that state and update it when we want to just like setState. Here’s our example.

So when our user inputs change its going to use the setForm function which allows us to update the state of our form.

Our form is going to stay pretty much the same, we just need to make two small changes.

We will change our input values from, value={this.state.name} to value={form.name}, and our onChange from, onChange={(e) => this.handleChange(e)} to onChange={(e) => handleChange(e)}

We are going to style this component differently. We will keep our styling in this file. Our css changes from,

to:

And then instead of using an id like before we add a style tag to our div and put the name of the style.

If you want to add inline styling, we can do it like this.

Here is our finished functional component form

Let’s finish up and add a button for our new form in our App component.

There you have it, you should have two identical forms, one made using a class component and the other a functional component. Obviously our form doesn’t do much right now, if you didn’t notice, we forgot to add a submit button! Check back next time, we will add that submit button and learn how to validate our inputs. Check out the full code at GitHub.