1.
import { useState } from "react"; const MyForm = () => { const [formData, setFormData] = useState({ name: "", email: "", message: "", }); const handleChange = (e) => { setFormData({ ...formData, [e.target.name]: e.target.value, }); }; const handleSubmit = async (e) => { e.preventDefault(); try { const response = await fetch("https://example.com/api/submit", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(formData), }); const result = await response.json(); console.log("Success:", result); alert("Form submitted successfully!"); } catch (error) { console.error("Error submitting form:", error); } }; return ( <form onSubmit={handleSubmit}> <div> <label>Name:</label> <input type="text" name="name" value={formData.name} onChange={handleChange} required /> </div> <div> <label>Email:</label> <input type="email" name="email" value={formData.email} onChange={handleChange} required /> </div> <div> <label>Message:</label> <textarea name="message" value={formData.message} onChange={handleChange} required /> </div> <button type="submit">Submit</button> </form> ); }; export default MyForm;