MM-103: Home component form which gets user's name

src/Home/Home.test.tsx

@@ -0,0 +1,17 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Home from "./Home";
+import "@testing-library/jest-dom";
+
+test("user's name is displayed on form submission", () => {
+    render(<Home />);
+
+    const name = "Luigi";
+    const textArea = screen.getByLabelText(/Enter name:/);
+    fireEvent.change(textArea, { target: { value: name }});
+
+    const submitButton = screen.getByRole("button");
+    fireEvent.click(submitButton);
+
+    const welcomeMessage = screen.getByText(/Welcome Luigi!/i);
+    expect(welcomeMessage).toBeInTheDocument();
+})

src/Home/Home.tsx

@@ -1,6 +1,27 @@
+import { useState } from "react";
+
 function Home() {
+
+    const [username, setUsername] = useState(""); 
+    const [submitStatus, setSubmitStatus] = useState(false);  
+
+    const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+        event.preventDefault();
+        setSubmitStatus(true);
+    }
+
     return (
         <>
+            <form onSubmit={handleSubmit}>
+                <label>Enter name: 
+                    <input type="text"
+                    value={username}
+                    onChange={username => setUsername(username.target.value)} 
+                    />
+                </label>
+                <button type="submit">Submit</button>
+                {submitStatus ? <p>Welcome {username}!</p> : null }
+            </form>
         </>
     )
 }