How to send form data into a JSON Object in ReactJS

ReactJS is front-end technology, To communicate with the backend we have to send form data to the backend in the form of APIs in JSON object. Let’s create a reactJS application that will get form data from the user and convert the data into a JSON format to send to the backend.

There are several ways to send form data to the backend in ReactJS. We will be using an npm package called React Form Hook to validate or send the form data. Below are the steps we have to follow,

Setup the environment
Create form
Get form data

Setup the environment

Install React Hook Form by typing npm install react-hook-form in command prompt in the project folder.

Create a functional component for creating the Form

import React from 'react';

const ReactForm = () => {
    return (
        <div>
            
        </div>
    );
};

export default ReactForm;

Create Form

Create a form with some input fields in it.

import React from 'react';

const ReactForm = () => {
    return (
        <div >
            <div>
                <form>
                    <div >
                        <label >
                            <span >Name</span>
                        </label>
                        <input
                            type="text" placeholder="name" />

                    </div>

                    <div >
                        <label >
                            <span>Email</span>
                        </label>
                        <input
                            type="email" placeholder="email" />

                    </div>
                    <div >
                        <label >
                            <span>Password</span>
                        </label>
                        <input
                            type="text" placeholder="address" />
                    </div>
                    <div>
                        <button type="submit">Send Data</button>
                    </div>

                </form>

            </div>
        </div>
    );
};

export default ReactForm;

Note: We are using Tailwind CSS and a Component library called “DaisyUI”, hence there will be no style at the very beginning.

Add some styles to the form component to make it look better,

import React from 'react';

const ReactForm2 = () => {
    return (
        <div className=" flex justify-center lg:h-screen items-center">
            <div className="card w-full md:w-96 items-center shadow-2xl bg-base-100">
                <form className="card-body w-full lg:w-96">
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Name</span>
                        </label>
                        <input
                            type="text" placeholder="name" className="input input-bordered" />

                    </div>

                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Email</span>
                        </label>
                        <input
                            type="email" placeholder="email" className="input input-bordered" />

                    </div>
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Address</span>
                        </label>
                        <input
                            type="text" placeholder="address" className="input input-bordered" />
                    </div>
                    <div className="form-control mt-6">
                        <button type="submit" className="btn btn-primary">Send Data</button>
                    </div>

                </form>

            </div>
        </div>
    );
};

export default ReactForm2;

To know about applying styles with TailwindCSS and using the component library, Read This Article.

Get Form Data

Import useForm() in the functional component.

import { useForm } from "react-hook-form";

Destructure register, handleSubmit from, useForm() hook.

    const { register, handleSubmit } = useForm();

Implement register functionality in each input box.

{...register("name", { required: true })}

Note: In place of “name”, put the name of the input box. Like if the input box is for an email, write “email” here instead of “name”.

import React from 'react';
import { useForm } from "react-hook-form";
const ReactForm = () => {

    const { register, handleSubmit } = useForm();
    return (
        <div className=" flex justify-center lg:h-screen items-center">
            <div className="card w-full md:w-96 items-center shadow-2xl bg-base-100">
                <form className="card-body w-full lg:w-96">
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Name</span>
                        </label>
                        <input
                            {...register("name", { required: true })}
                            type="text" placeholder="name" className="input input-bordered" />

                    </div>

                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Email</span>
                        </label>
                        <input
                            {...register("email", { required: true })}
                            type="email" placeholder="email" className="input input-bordered" />

                    </div>
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Address</span>
                        </label>
                        <input
                            {...register("address", { required: true })}
                            type="text" placeholder="address" className="input input-bordered" />



                    </div>
                    <div className="form-control mt-6">
                        <button type="submit" className="btn btn-primary">Send Data</button>
                    </div>

                </form>

            </div>
        </div>
    );
};

export default ReactForm;

Declare the handleSubmit() function from useForm() hook inside the function of the very component and implement it at form.

const { register, handleSubmit } = useForm();

   const onSubmit = data => {
       console.log(data)
   };

Note: Pass ‘data’ as a parameter of this function, this will get all the values from the input boxes as object.

Add an onSubmit() handler to the form and pass this handleSubmit() function.

<form onSubmit={handleSubmit(onSubmit)} >

import React from 'react';
import { useForm } from "react-hook-form";
const ReactForm = () => {

    const { register, handleSubmit } = useForm();

    const onSubmit = data => {
// console.log the data to see the input values
        console.log(data)
    };
    return (
        <div className=" flex justify-center lg:h-screen items-center">
            <div className="card w-full md:w-96 items-center shadow-2xl bg-base-100">
                <form onSubmit={handleSubmit(onSubmit)} className="card-body w-full lg:w-96">
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Name</span>
                        </label>
                        <input
                            {...register("name", { required: true })}
                            type="text" placeholder="name" className="input input-bordered" />

                    </div>

                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Email</span>
                        </label>
                        <input
                            {...register("email", { required: true })}
                            type="email" placeholder="email" className="input input-bordered" />

                    </div>
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Address</span>
                        </label>
                        <input
                            {...register("address", { required: true })}
                            type="text" placeholder="address" className="input input-bordered" />



                    </div>
                    <div className="form-control mt-6">
                        <button type="submit" className="btn btn-primary">Send Data</button>
                    </div>

                </form>

            </div>
        </div>
    );
};

export default ReactForm;

Note: Console.log the data to see the input values.

Fill up the form and click on Send Data button then, check the result in the dev-tool of the browser.

As the result shown in the above pictures, we can get the values from the form. And we can send this data to any backend server.