Form Submission in React JS

When you submit a form in React, you normally want to:

1. Capture input values (using state)

2. Stop page reload (using event.preventDefault())

3. Do something with the data (show, send to server, etc.)

1. The Basic Idea

• React forms usually use controlled components, meaning input values come from React state.

• When the form is submitted, we handle it inside one function — not by letting the browser reload the page.

import { useState } from "react";

function App() {

const [name, setName] = useState(""); // Step 1: State to store input

function handleSubmit(event) {

event.preventDefault(); // Step 2: Stop browser refresh

alert(`Form submitted! Hello, ${name}`); // Step 3: Do something

setName(""); // Optional: Clear input after submit

}

return (

<form onSubmit={handleSubmit}>

<label>

Enter your name:

<input

type="text"

value={name}

onChange={(e) => setName(e.target.value)} // Update state on typing

/>

</label>

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

</form>

);

}

export default App;

What’s Happening Here?

1. useState stores input data → name changes as you type.

2. onChange updates state every time the user types something.

3. onSubmit handles form submission when you click submit or press Enter.

4. event.preventDefault() stops the browser from reloading the page (default behavior of forms).

5. You can now do anything with the data → log it, send to API, display it, etc.

Adding Multiple Fields

If you have more than one input:

• Using one handleChange for all inputs by using name attribute.

Key Takeaways for a Fresher

• Always control inputs with useState (so React knows their values).

• Always stop default form reload with event.preventDefault().

• Handle everything inside one onSubmit function.

• You don’t need separate handlers for every field — use one generic handler if possible.