import { useState } from "react";

​

export default function Multiple() {

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

​

  const handleChange = (event) => {

    const { name, value } = event.target;

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

  };

​

  const handleSubmit = (event) => {

    event.preventDefault();

    alert(`Name: ${formData.name}, Email: ${formData.email}, Message: ${formData.message}`

    );

};

​

  return (

    <form onSubmit={handleSubmit}>

      <label htmlFor="name">Name:</label>

      <input type="text" id="name" name="name" value={formData.name} onChange={handleChange}/>

​

      <label htmlFor="email">Email:</label>

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

​

      <label htmlFor="message">Message:</label>

      <textarea id="message" name="message" value={formData.message} onChange={handleChange}/>

​

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

    </form>

  );

}

function MyForm() {

  const handleSubmit = (event) => {

    event.preventDefault();

​

    const data = new FormData(event.currentTarget);

    const values = Object.fromEntries(data.entries());

​

    if (!Number(values.age)) {

      alert('Your age must be a number');

      return;

    }

​

    console.log('submitting', values);

  };

​

  return (

    <form onSubmit={handleSubmit}>

      <h1>Hi!</h1>

​

      <p>Enter your name:</p>

      <input type="text" name="username" />

​

      <p>Enter your age:</p>

      <input type="text" name="age" />

​

      <br /><br />

      <input type="submit" />

    </form>

  );

}

import {useState} from 'react';

export default function  ControlledComponent()  {

    const  [inputValue, setInputValue] =  useState('');

​

    const  handleChange = (event) => {

        setInputValue(event.target.value);

    };

​

return  (

<form>

    <label>Input Value:

    <input  type="text"  value={inputValue} onChange={handleChange} />

    </label>

    <p>Input Value: {inputValue}</p>

</div>

)};