kpresun / prim-proper-props

Prim Proper Props

We're creating an application that allows party planners to plan prim and proper parties.

Base Requirements

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):

1. Header
2. Footer
3. Guest List
4. Dinner Supplies
5. 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>

Stretch Goals

Leader

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]}/>

Silverware

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} />

Remove a guest

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

Create a Guest component that is the <tr> of the table and pass props accordingly.