React onSubmit Event

React onSubmit is an event handler that triggers when a form is submitted. It is one of the form events that sends the input data to the handleSubmit function to utilize that information.

It is similar to the HTML DOM onsubmit event but uses the camelCase convention in React.

Syntax:

<form onSubmit={handleSubmit} >
    <input type="text">
</form>

Parameter:

• handleSubmit: It is a function call that includes the code to be executed with the form input when an event triggers

Return type:

• event: It is an event object containing information about the event like target element and values

Example 1: This example demonstrates the use of the onSubmit event handler to update the states in React.

Javascript

// Filename - App.js

import React, { useState } from "react";
function App() {
    const [value, setValue] = useState("");
    const [result, setResult] = useState("");
    function handleSubmit(e) {
        e.preventDefault();
        setResult(
            "Form has been submitted with with Input: " +
                value
        );
    }

    function handleChange(e) {
        setValue(e.target.value);
        setResult("");
    }
    return (
        <div
            style={{ textAlign: "center", margin: "auto" }}
        >
            <h1 style={{ color: "Green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                Exemple for React onSubmit Event Handler
            </h3>
            <form onSubmit={handleSubmit}>
                <label>Add input here: </label>
                <input
                    value={value}
                    onInput={handleChange}
                    required
                />
                <br />
                <br />
                <button type="submit">Submit</button>
            </form>
            <br />
            <div>
                <h4>{result}</h4>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: This example demonstrate the use of the onSubmit event handler in select input.

Javascript

// Filename - App.js

import React, { useState } from "react";
function App() {
    const [value, setValue] = useState("");
    const [result, setResult] = useState("");
    function handleSubmit(e) {
        e.preventDefault();
        setResult(
            "Form has been submitted with with Input: " +
                value
        );
    }

    function handleChange(e) {
        setValue(e.target.value);
        setResult("");
    }
    return (
        <div
            style={{ textAlign: "center", margin: "auto" }}
        >
            <h1 style={{ color: "Green" }}>
                GeeksforGeeks
            </h1>
            <h3>
                Exemple for React onSubmit Event Handler
            </h3>
            <form onSubmit={handleSubmit}>
                <label>Select Input: </label>
                <select
                    value={value}
                    onChange={handleChange}
                >
                    <option value={"HTML"}>HTML</option>
                    <option value={"CSS"}>CSS</option>
                    <option value={"JavaScript"}>
                        JavaScript
                    </option>
                </select>
                <br />
                <br />
                <button type="submit">Submit</button>
            </form>
            <br />
            <div>
                <h4>{result}</h4>
            </div>
        </div>
    );
}

export default App;

Output: