We're creating an application that allows party planners to plan prim and proper parties.
This application is fully functional! But App.js
is getting really crowded. It could use a proper clean up! Add components to clean up App.js
Create the new components in the following order (increasing level of difficulty):
- Header [x]
- Footer [x]
- Guest List [x]
- Dinner Supplies [x]
- Guest Form [ ]
The application should still work the same way. Here is what App.js
should render when the refactor is complete:
<div className="App">
<Header />
<h2>Party Leader</h2>
{guestList[0] && <h3>{guestList[0].name}</h3>}
<GuestForm
newGuestName={newGuestName}
setNewGuestName={setNewGuestName}
newGuestMeal={newGuestMeal}
setNewGuestMeal={setNewGuestMeal}
handleSubmit={handleSubmit}
/>
<GuestList guestList={guestList} />
<DinnerSupplies guestList={guestList} />
<Footer />
</div>
Create a PartyLeader
Component so that the lines in App.js
:
<h2>Party Leader</h2>
{guestList[0] && <h3>{guestList[0].name}</h3>}
Can be replaced by:
<PartyLeader leader={guestList[0]}/>
Create a SilverWare
Component as a reusable Component so that the lines in DinnerSupplies
:
<div>
Spoons: {count * 2}
</div>
<div>
Forks: {count * 2}
</div>
<div>
Knives: {count * 2}
</div>
Can be replaced by:
<SilverWare name="Spoons" count={count} />
<SilverWare name="Forks" count={count} />
<SilverWare name="Knives" count={count} />
Allow the user to remove a guest from the list by adding a Delete
button to teach row in the table and removing them from the database.
Create a Guest
component that is the <tr>
of the table and pass props accordingly.