React onSubmit

We will demonstrate using the onSubmit method with a button in React.

Use the onSubmit Method to Submit Any Form in React

The onSubmit method allows the function to be executed whenever triggered by the submit event.

We use the onSubmit method in all of our forms to submit the data form user to our database using forms.

It’s one of the main parts of forms. And with the era of management systems, almost every website and web application have forms and the onSubmit method in almost all of these forms.

This tutorial will discuss how we can use onSubmit with buttons in our React application and bind the data of input fields with the submit request.

Let’s create a new React application using the following command.

# react
npx create-react-app my-app

After creating our new application in React, we will go to our application directory using this command.

# react
cd my-app

Now, let’s run our app to check if all dependencies are installed correctly.

# react
npm start

In our App.js file, instead of using the export default function App(), we will be using the export default class App extends React.Component.

Inside our App class, we will use the state to define the yourname variable that we will be getting from the user’s input.

In return, we will create a form with the onSubmit method to call the function onSubmitEvent. Inside the form, we will have an input field that will take the user’s name as input.

And we will have a button with the type submit that will trigger the form submission.

# react
<>
 <form onSubmit={this.onSubmitEvent}>
   <input
     type="text"
     name="yourname"
     placeholder="Enter Your Name"
     onChange={this.onChange}
     />
    <button type="submit">Save</button>
 </form>
</>

We will create 2 functions, onChange and onSubmitEvent, that will use setState to set the input value to our variable yourname.

So, our code in App.js will look like below.

# react
import React from "react";
import "./styles.css";

export default class App extends React.Component {
  state = {
    yourname: ""
  };

  onChange = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmitEvent = (e) => {
    e.preventDefault();
    const { yourname } = this.state;
    console.log("Hello " + yourname + "!");
  };
  render() {
    return (
      <>
        <form onSubmit={this.onSubmitEvent}>
          <input
            type="text"
            name="yourname"
            placeholder="Enter Your Name"
            onChange={this.onChange}
          />
          <button type="submit">Save</button>
        </form>
      </>
    );
  }
}

We will add some CSS to make changes in our form input field and button.

# react
.App {
  font-family: sans-serif;
  text-align: center;
}
input{
  padding: 5px;
  color: black;
  border: none;
  border-bottom: 1px solid black;
  margin-right: 10px;
}
button{
  background: black;
  padding: 10px;
  border: none;
  color: white;
}
button:hover{
  background: white;
  border: 1px solid black;
  color: black;
}

Output:

We can easily use the onSubmit method to submit any form in React, get values of that form, and store it by following these simple steps.

You can check the full code here.