import { useState } from "react"; import "./App.css";

import "h8k-components";

function App() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [message, setMessage] = useState(""); const [submittedData, setSubmittedData] = useState(null); const [error, setError] = useState("");

const handleSubmit = (e) => { e.preventDefault(); const isValid = name.trim()!=="" && email.trim()!=="" && message.trim()!=="";

isValid?setSubmittedData({name,email,message}):setError("All fields are required.");

isValid?setError(""):setSubmittedData(null);

setName('');
setEmail('');
setMessage('');

};

return ( <>

Contact Form

setName(e.target.value)} placeholder="Name" data-testid="name-input" /> setEmail(e.target.value)} placeholder="Email" data-testid="email-input" /> setMessage(e.target.value)} placeholder="Message" data-testid="message-input" /> Submit {error && ( {error}

)} {submittedData && (

Submitted Information

Name: {submittedData.name}

Email: {submittedData.email}

Message: {submittedData.message}

)} ); }

export default App;