React Submit Forms

Submitting forms in React involves handling the form’s onSubmit event and controlling the form input values using state.

React does not automatically submit forms like HTML — instead, you manually manage submission logic (validation, API calls, storing data, etc.).

📌 Basic Example: Form Submit in React

import { useState } from "react";

function MyForm() {
const [name, setName] = useState("");

const handleSubmit = (event) => {
event.preventDefault(); // Prevent page refresh
alert("Form submitted! Name: " + name);
};

return (
<form onSubmit={handleSubmit}>
<label>Name:</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>

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

import { useState } from "react";

function MyForm() {

const [name, setName] = useState("");

const handleSubmit = (event) => {

event.preventDefault(); // Prevent page refresh

alert("Form submitted! Name: " + name);

};

return (

<input

type="text"

value={name}

onChange={(e) => setName(e.target.value)}

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

</form>

);

}

export default MyForm;

📌 Submitting Multiple Fields

import { useState } from "react";

function SignupForm() {
const [formData, setFormData] = useState({
username: "",
email: "",
});

const handleChange = (event) => {
const { name, value } = event.target;

setFormData((prevData) => ({
...prevData,
[name]: value
}));
};

const handleSubmit = (event) => {
event.preventDefault();
console.log("Submitted Data:", formData);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="username"
placeholder="Username"
value={formData.username}
onChange={handleChange}
/>

<input
type="email"
name="email"
placeholder="Email"
value={formData.email}
onChange={handleChange}
/>

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

import { useState } from "react";

function SignupForm() {

const [formData, setFormData] = useState({

username: "",

email: "",

});

const handleChange = (event) => {

const { name, value } = event.target;

setFormData((prevData) => ({

...prevData,

[name]: value

}));

};

const handleSubmit = (event) => {

event.preventDefault();

console.log("Submitted Data:", formData);

};

return (

<input

type="text"

name="username"

placeholder="Username"

value={formData.username}

onChange={handleChange}

<input

type="email"

name="email"

placeholder="Email"

value={formData.email}

onChange={handleChange}

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

</form>

);

}

export default SignupForm;

📌 Display Submitted Data

import { useState } from "react";

function FeedbackForm() {
const [feedback, setFeedback] = useState("");
const [submittedText, setSubmittedText] = useState("");

const handleSubmit = (e) => {
e.preventDefault();
setSubmittedText(feedback);
};

return (
<>
<form onSubmit={handleSubmit}>
<textarea
value={feedback}
onChange={(e) => setFeedback(e.target.value)}
/>

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

<h3>Submitted Feedback:</h3>
<p>{submittedText}</p>
</>
);
}

import { useState } from "react";

function FeedbackForm() {

const [feedback, setFeedback] = useState("");

const [submittedText, setSubmittedText] = useState("");

const handleSubmit = (e) => {

e.preventDefault();

setSubmittedText(feedback);

};

return (

<textarea

value={feedback}

onChange={(e) => setFeedback(e.target.value)}

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

</form>

<h3>Submitted Feedback:</h3>

<p>{submittedText}</p>

</>

);

}

export default FeedbackForm;

📌 Submit Button Types

Button Type	Purpose
`type="submit"`	Submits the form
`type="reset"`	Clears form fields
`type="button"`	No submit action

⭐ Best Practices

✔ Use event.preventDefault() to avoid page reload
✔ Use controlled components (react state)
✔ Validate input before submitting
✔ Submit data to API using fetch() or axios (optional later step)

React Submit Forms