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.

Image for post

Next let’s create our class component.

Image for post

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.

Image for post

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

Image for post

Now, let’s begin making our form.

Image for post

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.

Image for post

And update our onChange in our input.

Image for post

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

Image for post
Image for post
Image for post

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.

Image for post

And here is how our new form looks.

Image for post

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.

Image for post

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:

Image for post

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.

Image for post

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)}

Image for post

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

Image for post

to:

Image for post

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

Image for post

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

Image for post

Here is our finished functional component form

Image for post
Image for post
Image for post

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.

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