codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19⚡

20

Level 9: Add Form Structure

Goal: Add a form to your PotluckMeals component for adding new meals.

User Story: As a user, I want to fill out a form to add my dish to the potluck so that others can see what I’m bringing.

---

What You’ll Do

Add a form with input fields for meal details to your component.

Instructions

• Add a form element with onSubmit={handleAddMeal} inside your return statement, after the ul element
• Create input fields for:
  • Meal name (text input with name=”mealName”)
  • Guest name (text input with name=”guestName”)
  • Serves count (number input with name=”serves”)
  • Kind of dish (text input with name=”kindOfDish”)
• Add a submit button with type=”submit” and text “Add Meal”
• Wrap the form in a div element

💡 Code Hints

Need help with form structure? Check out these snippets:

Show Me: form JSX

// Add this inside your return statement, after the ul element
<div>
    <form onSubmit={handleAddMeal}>
        <label>
            Meal: <input type="text" name="mealName" />
        </label>
        <br/>
        <label>
            Guest: <input type="text" name="guestName" />
        </label>
        <br/>
        <label>
            Serves: <input type="number" name="serves" />
        </label>
        <br/>
        <label>
            Kind of Dish: <input type="text" name="kindOfDish" />
        </label>
        <br/>
        <button type="submit">Add Meal</button>
    </form>
</div>

Show Me: Form added

✅ Check

1. You see a form with four input fields
2. Each input has a clear label
3. The form has a submit button
4. All input fields have proper name attributes
5. The form is positioned below the meals list

---

---