A Simple Guide to Build React Form with Hooks
Tags: react, form, hooks, beginners
Published: 2020-12-29 03:19:24

---
title: A Simple Guide to Build React Form with Hooks
published: true
date: 2020-09-19 00:25:08 UTC
tags: React,form,hooks,beginners
canonical_url: https://lo-victoria.com/a-simple-guide-to-build-react-form-with-hooks
---


With React, there are many ways that you can build forms. The simplest way that I found is by [React Hook Forms](https://react-hook-form.com/). In this article, I'll show you how to create and build a React form easily with React Hook Forms.

## Step 1: Build the Form
React Hook Forms provides a tool for you to easily create your forms. Then you can copy the code snippet generated for your form and paste it to your project. Head to the [Builder](https://react-hook-form.com/form-builder) to build your own form.

![Builder.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1599270460808/kKAohDKd9.png)

### Add Optional Details
In the Builder, you can also customize the input attributes such as if it is required or its max length. Again, the code will be automatically generated so it's very convenient.

![input.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1599675916303/hkPLX00er.png)

Once you have built your form, you can click **'Generate Form'** to see what it looks like. Here's my example:

![example.PNG](https://cdn.hashnode.com/res/hashnode/image/upload/v1599271761509/Cad6N2ZEx.png)

## Step 2: Paste the Code
First, run `npm install react-hook-form` in your project.

Now that you've generated your form, simply paste it to your project file. For my example, I'll paste it into `App.js`.

```
import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" name="First name" ref={register({required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" name="Last name" ref={register({required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" name="Email" ref={register({required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" name="Mobile number" ref={register({required: true, minLength: 6, maxLength: 12})} />

      <input name="Gender" type="radio" value="Female" ref={register({ required: true })}/>
      <input name="Gender" type="radio" value="Male" ref={register({ required: true })}/>

      <input type="submit" />
    </form>
  );
}
```

## Step 3: Submit Form
The form is now in our app. All we need to do is to take care of what happens when a user submits the form. To do this, we need to add some code to the `onSubmit` function.

Currently, the `onSubmit` code generated for us only returns `console.log(data)` where `data` contains the user's submitted form data in JSON format like:
```
// sample data object
{
  "First name": "Victoria",
  "Last name": "Lo",
  "Email": "victoria@example.com",
  "Mobile number": "9999999999",
  "Gender": "Female"
}
```
Let's say we want to take this `data` and POST it to our database.

Our `onSubmit` function will be as follows:
```
const onSubmit = data =>{
      //create requestOptions to prepare for post
      const requestOptions = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data), //send the form data
      };

      //post form data to database or something
      fetch(someURL, requestOptions)
      .then(doSomething); 
}
```

## And done!
And that's how you can create a form easily with React! It's good to use the Builder tool to create forms fast but I do encourage you to read the [documentation](https://react-hook-form.com/api) more in detail to understand how it works and include more advanced options on your own. Thanks for reading this quick tutorial. I hope you find it helpful! Please feel free to ask any questions in the comments below. Cheers!