SamwithCode

React form handling useState 2025

React Form Handling – 2025

In 2025, the recommended way to handle forms in React is by using useState for local state management or libraries like react-hook-form for advanced use cases. Below is a simple and modern example using functional components and controlled inputs.

🧪 Basic Form with useState


import React, { useState } from 'react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
    // Add your form submission logic here (e.g., fetch API)
  };

  return (