Controlled Form

 import React, { useState } from "react";

function Form() {

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

  const [submittedData, setSubmittedData] = useState(null);

  const handleChange = (e) => {

    const { name, value } = e.target;

    setFormData({ ...formData, [name]: value });

  };

  const handleSubmit = (e) => {

    e.preventDefault();

    setSubmittedData(formData);

  };

  return (

    <div>

      <h2>Controlled Form</h2>

      <form onSubmit={handleSubmit}>

        <input

          type="text"

          name="name"

          placeholder="Name"

          value={formData.name}

          onChange={handleChange}

        />

        <input

          type="email"

          name="email"

          placeholder="Email"

          value={formData.email}

          onChange={handleChange}

        />

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

      </form>

      {submittedData && (

        <div>

          <h3>Submitted Data:</h3>

          <p>Name: {submittedData.name}</p>

          <p>Email: {submittedData.email}</p>

        </div>

      )}

    </div>

  );

}

export default Form;