In this article, we will learn how to handle form submissions in React and React and the input value on submission of a form in react JS.

onSubmit={handleFormSubmit}  the event will call the handleFormSubmit function will call at the time of form submission and under the handleFormSubmit function will implement the states to read the input values on form submission in reactJS.

Get form value on submit in react js

// function for handling form submission 
const handleFormSubmit = e => { 
  e.preventDefault();
// object to store input data 
const formData = { name: name, email: email } 
};

For the demonstration, the complete task will create a simple ReactJS application that contains a form and when the user fills up the form and click on to submit button, will read the data and print input values on a console.

Below are the steps of the task that will help you to understand the complete example to get the input values.

• Create react app
• Create a form
• Handle submission

Create react app

• Run this below command in the command prompt

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

• Open app.js file from the src folder which is inside the react project folder

import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div >
      
    </div>
  );
}

export default App

Please read this article to know more about creating a project in React.

Create form

• Create a form with some input fields in the app.js file

import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div className="mx-32">
      <form className="card-body  my-20 p-0">

        <div className="form-control items-center lg:items-start">
          <input required type="text" placeholder="Name" className="input input-bordered w-full max-w-md " />
        </div>

        <div className="form-control items-center lg:items-start">
          <input required type="email" placeholder="Email" className="input input-bordered w-full max-w-md " />
        </div>

        <div className="form-control items-center lg:items-start mt-6">
          <button type="submit" className="btn btn-sm w-full max-w-md">Submit</button>
        </div>
      </form>
    </div>
  );
}

export default App

Note: we are using Tailwind CSS to use styled-components. Please read this article to know more about it.

Handle submission

• Create two states to store the input values in those

// state for storing name
const [name, setName] = useState('');
// state for storing email
const [email, setEmail] = useState('');

Note: Please read this article to know more about handling states in react.

• Create two functions to get the input values and set the values to setState() function

// function for storing name
 const handleNameChange = e => {
   setName(e.target.value)
 };
 // function for storing email
 const handleEmailChange = e => {
   setEmail(e.target.value)
 }

• Declare onChange() event handler into those input fields and set the values as the function that has just been declared

<div className="form-control items-center lg:items-start">
  <input onChange={handleNameChange} required type="text" placeholder="Name" className="input input-bordered w-full max-w-md " />
</div>

<div className="form-control items-center lg:items-start">
  <input onChange={handleEmailChange} required type="email" placeholder="Email" className="input input-bordered w-full max-w-md " />
</div>

This way the state variables will contain the values that we write into these inputs.

• Create another function to handle the form submission

// function for handling form submission
const handleFormSubmit = e => {
  e.preventDefault();
};

The purpose of taking a parameter named, e and adding a method named, preventDefault() to it, is because, while creating a form, each form performs an action. That action causes the page to render. That we don’t want. We don’t want that our page doesn’t render yet when we click on the submit button.

• Create a onSubmit() handler into the function. And pass this handleFormSubmit function as a value to that onSubmit() event handler.

<form onSubmit={handleFormSubmit} className="card-body  my-20 p-0">

import React, { useState, useEffect } from "react";
const App = () => {
  // state for storing name
  const [name, setName] = useState('');
  // state for storing email
  const [email, setEmail] = useState('');

  // function for storing name
  const handleNameChange = e => {
    setName(e.target.value)
  };
  // function for storing email
  const handleEmailChange = e => {
    setEmail(e.target.value)
  };

  // function for handling form submission
  const handleFormSubmit = e => {
    e.preventDefault();
  };
  return (
    <div className="mx-32">
      <form onSubmit={handleFormSubmit} className="card-body  my-20 p-0">

        <div className="form-control items-center lg:items-start">
          <input onChange={handleNameChange} required type="text" placeholder="Name" className="input input-bordered w-full max-w-md " />
        </div>

        <div className="form-control items-center lg:items-start">
          <input onChange={handleEmailChange} required type="email" placeholder="Email" className="input input-bordered w-full max-w-md " />
        </div>

        <div className="form-control items-center lg:items-start mt-6">
          <button type="submit" className="btn btn-sm w-full max-w-md">Change Text</button>
        </div>
      </form>
    </div>
  );
}

export default App

// function for handling form submission
 const handleFormSubmit = e => {
   e.preventDefault();
   // object to store input data
   const formData = {
     name: name,
     email: email
   }
 };

import React, { useState, useEffect } from "react";
const App = () => {
  // state for storing name
  const [name, setName] = useState('');
  // state for storing email
  const [email, setEmail] = useState('');

  // function for storing name
  const handleNameChange = e => {
    setName(e.target.value)
  };
  // function for storing email
  const handleEmailChange = e => {
    setEmail(e.target.value)
  };

  // function for handling form submission
  const handleFormSubmit = e => {
    e.preventDefault();
    // object to store input data
    const formData = {
      name: name,
      email: email
    };
    console.log(formData);
  };
  return (
    <div className="mx-32">
      <form onSubmit={handleFormSubmit} className="card-body  my-20 p-0">

        <div className="form-control items-center lg:items-start">
          <input onChange={handleNameChange} required type="text" placeholder="Name" className="input input-bordered w-full max-w-md " />
        </div>

        <div className="form-control items-center lg:items-start">
          <input onChange={handleEmailChange} required type="email" placeholder="Email" className="input input-bordered w-full max-w-md " />
        </div>

        <div className="form-control items-center lg:items-start mt-6">
          <button type="submit" className="btn btn-sm w-full max-w-md">Submit</button>
        </div>
      </form>
    </div>
  );
}

export default App

As we can see, after clicking on the submit button, the input values will appear in the browser console. And this way, we can handle form submission in react.