Handling Events & Controlled Form Input Architecture

import React, { useState } from 'react';

export default function ProjectForm() {

const [projectName, setProjectName] = useState("");

const [submittedName, setSubmittedName] = useState("");

const handleSubmit = (e: React.FormEvent) => {

e.preventDefault();

if (projectName.trim()) {

setSubmittedName(projectName);

setProjectName("");

}

};

return (

<form onSubmit={handleSubmit} className="space-y-3">

<input

type="text"

value={projectName}

onChange={(e) => setProjectName(e.target.value)}

placeholder="Enter project name..."

className="w-full px-4 py-2 bg-slate-900 border border-slate-800 rounded-xl text-white focus:outline-none focus:border-emerald-500"

/>

<button

type="submit"

className="w-full py-2 bg-emerald-500 hover:bg-emerald-600 text-white font-bold rounded-xl"

>

Save Project

</button>

{submittedName && <p className="text-emerald-400 text-sm font-semibold">Saved: {submittedName}</p>}

</form>

);

}