import React, { useRef, useState } from "react";
const Contact = () => {
const form = useRef(null);
const [details, setDetails] = useState({
name: "",
phone: "",
email: "",
message: "",
});
const handleChange = (e) => {
const { name, value } = e.target;
setDetails((prev) => {
return { ...prev, [name]: value };
});
};
const handleSubmit = (e) => {
e.preventDefault();
form.current.reset();
console.log(details);
};
return (
<form ref={form} onSubmit={handleSubmit}>
<h3>Name: </h3> <input name="name" type="text" onChange={handleChange} />
<h3>Phone: </h3>
<input name="phone" type="text" onChange={handleChange} />
<h3>Email: </h3>
<input name="email" type="text" onChange={handleChange} />
<h3>Message: </h3>
<textarea name="message" onChange={handleChange}></textarea>
<div>
<button type="submit">Submit</button>
</div>
</form>
);
};
export default Contact;
