Building a Form in React

Building forms in React is a bit different than building simple forms in just HTML. But, once you get the hang of it these forms are extremely powerful.

In this tutorial we’ll be building a simple form that will have two text inputs (one for password and one for username). We’re going to use state to manage inputs and data.

So first, we’ll initialize our React application. I’m going to go ahead and write this tutorial purely in React, assuming you have your own setup for bundling and what not. I‘m going to assume that your using this as a piece of your React App and I’ll just export the LoginForm component.

<a href="https://medium.com/media/18f515f367ec150e26ce2a38ec7314a1/href">https://medium.com/media/18f515f367ec150e26ce2a38ec7314a1/href</a>

And that’s it you’re done. Good job. Simply titling the component LoginForm will execute the ReactMagicForms.jsx script bundled into React itself.

haha just kidding

Next up, we need to set our initial state in the constructor. Since I’m not using any props in this component we don’t need to use it as a parameter.

<a href="https://medium.com/media/0108f5a9a02e3da8b67cdc71bda670bb/href">https://medium.com/media/0108f5a9a02e3da8b67cdc71bda670bb/href</a>

When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement. Otherwise, this.props will be undefined in the constructor, which can lead to bugs.

React.Component#constructor — React docs

After we do our super we set the initial state of username and password. Since the user hasn’t typed anything yet, we want empty values. Since both are going to be strings we just use empty strings.

Now that we have our initial state and username values, we need to setup our form in our render method. For the sake of simplicity, I won’t be adding bootstrap or any other ‘styling’ to the page. I trust that if you’re already doing React and JS in general you have a fair understanding of HTML & CSS.

<a href="https://medium.com/media/68881b0e24646df3c873d0c9dc7240b5/href">https://medium.com/media/68881b0e24646df3c873d0c9dc7240b5/href</a>

Next up we need to add a few methods for managing the forms. We’re going to add two methods: a handleChange method for handling the input as the user types, and a handleSubmit method for handling the submitted data.

We need to handle data using this in the two methods. When we use this in React we have to bind it to the method using it, or else it will return undefined.

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

Handling Events#gatsby — React docs

<a href="https://medium.com/media/8d4d3956ec064593544b0a124f16d597/href">https://medium.com/media/8d4d3956ec064593544b0a124f16d597/href</a>

The next part is where everything is going to start coming together. We’re going to write some logic for our handleChange and handleSubmit events, attach those to the elements necessary in our form, and then we’ll be good to go.

<a href="https://medium.com/media/bc69a38eb69933dfca0c9a3a6f34b6a5/href">https://medium.com/media/bc69a38eb69933dfca0c9a3a6f34b6a5/href</a>

So, for the handleChange event, we use the setState method to set the state of whatever the user is currently targeting, to the value they’re typing. So, for example, if the user types waffles into the username input, the current state of the username state will be waffles.

After the state is set to the typed value in the input, and the form is submitted, the handleSubmit method will take the username and password variables from this.state. Then, you can use those variables with whatever method or package you’d like to submit. Here’s an example using axios:

<a href="https://medium.com/media/1b8d5d28cf36d17d0bdd71ba0fdc8948/href">https://medium.com/media/1b8d5d28cf36d17d0bdd71ba0fdc8948/href</a>

And that’s how to write a small bit of form logic. What’s nice about this way is you only need one handleChange event. Next blog post I write will be about form validation in React.