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

import "h8k-components";

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

const handleSubmit = (e) => { e.preventDefault(); //Mencegah page refresh

if(!name || !email || !message){
  setError("All fields are required.")
  setSubmittedData(null)
} // Mengecek apakah ada page kosong atau tidak, jika iya maka tampilkan error
else{
  setSubmittedData({name, email, message}) // Simpan data yang diinput
  setName("") // Clear form
  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;