In this article, we will learn how to create a component to add user with a form in which where the user will write the data that are required. Below are the steps that we will be following,

• Create react app
• Create a component for adding user
• Create a form and a function to get user data

Create react app

• Open the command prompt and run the below codes to create a react app

npx create-react-app my-app
cd my-app
npm start

Note: Please read this article to know more about creating a react project

• Open the app.js file from the src folder which resides inside the newly created react project folder.

import React from "react";
import './App.css'
const App = () => {
  return (
    <div>
    </div>
  );
}

export default App

Create a component for adding user

• Create a component named, AddUser

import React from 'react';

const AddUser = () => {
    return (
        <div>

        </div>
    );
};

export default AddUser;

Create a form

• Create a form,

import React from 'react';

const addUser = () => {
    return (
        <div>
            <form>


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

export default addUser;

• Create an input field for the user name,

<div>
                  <label htmlFor="name"></label>
                  <input id='name' type="text" placeholder='name' />
              </div>

• Create another input field for email

<div>
                  <label htmlFor="email"></label>
                  <input id='email' type="email" placeholder='email' />
              </div>

• Add a button to submit,

<div>
                   <button type="submit">Submit</button>
               </div>

import React from 'react';

const addUser = () => {
    return (
        <div>
            <form>
                <div>
                    <label htmlFor="name"></label>
                    <input id='name' type="text" placeholder='name' />
                </div>
                <div>
                    <label htmlFor="email"></label>
                    <input id='email' type="email" placeholder='email' />
                </div>

                <div>
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    );
};

export default addUser;

• Import and use this component in the App.js file,

import React from "react";
import AddUser from "./addUser";
import './App.css'
const App = () => {
  return (
    <div>
      <AddUser />
    </div>
  );
}

export default App

• Add some styles to make it better,

Note: we are using Tailwind CSS to make it look better, read this article to know more about it.

• Create a function for the form,

const handleFormSubmission = e=>{
       e.preventDefault()
   }

• Add an onSubmit() event handler in the form and pass this function

import React from 'react';

const AddUser = () => {
    const handleFormSubmission = e => {
        e.preventDefault()
    }
    return (
        <div>
            <form
                onSubmit={handleFormSubmission}
                className='border-2 border-gray-400 shadow-lg rounded-md w-1/2'>
                <div className='my-4 block mx-auto w-1/2'>
                    <label htmlFor="name"></label>
                    <input className='input input-bordered w-full max-w-xs' id='name' name="name" type="text" placeholder='name' />
                </div>
                <div className='my-4 block mx-auto w-1/2'>
                    <label htmlFor="email"></label>
                    <input className='input input-bordered w-full max-w-xs' id='email' name="email" type="email" placeholder='email' />
                </div>

                <div className=' my-10 block mx-auto w-1/2'>
                    <button className='btn' type="submit">Submit</button>
                </div>
            </form>
        </div>
    );
};

export default AddUser;

• Get the input values,

const handleFormSubmission = e => {
       e.preventDefault();
       const formData = {
           name: e.target.name.value,
           email: e.target.email.value,
       }
   }

this way we will get the input values in the object.

import React from 'react';

const AddUser = () => {
    const handleFormSubmission = e => {
        e.preventDefault();
        const formData = {
            name: e.target.name.value,
            email: e.target.email.value,
        }
    }
    return (
        <div>
            <form
                onSubmit={handleFormSubmission}
                className='border-2 border-gray-400 shadow-lg rounded-md w-1/2'>
                <div className='my-4 block mx-auto w-1/2'>
                    <label htmlFor="name"></label>
                    <input className='input input-bordered w-full max-w-xs' id='name' name="name" type="text" placeholder='name' />
                </div>
                <div className='my-4 block mx-auto w-1/2'>
                    <label htmlFor="email"></label>
                    <input className='input input-bordered w-full max-w-xs' id='email' name="email" type="email" placeholder='email' />
                </div>

                <div className=' my-10 block mx-auto w-1/2'>
                    <button className='btn' type="submit">Submit</button>
                </div>
            </form>
        </div>
    );
};

export default AddUser;

And this is how we can create an AddUser component to add user data.