Contact Form Data in React JS 2025
Contact Form Data in React JS 2025
Method 1: Controlled Component using useState
In this method, form inputs are bound to React state using useState. Every input change updates the state.
import React, { useState } from "react";
function ContactFormControlled() {
const [formData, setFormData] = useState({ name: "", email: "" });
const handleChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(formData);
};
return (
);
}
Method 2: Uncontrolled Component using useRef
In this method, you access the input values directly using ref instead of storing them in state.
import React, { useRef } from "react";
function ContactFormUncontrolled() {
const nameRef = useRef();
const emailRef = useRef();
const handleSubmit = (e) => {
e.preventDefault();
const data = {
name: nameRef.current.value,
email: emailRef.current.value
};
console.log(data);
};
return (
);
}
💡 Tip: Controlled forms give more control and are best for validation. Uncontrolled forms are easier but less flexible.