usadams83 / u2_hw_korilla

SEIR 1003, October 25, 2021

Korilla React Receipts

Korilla is a Korean barbecue taco truck that makes thousands of hungry customers happy every year.

Their CEO is thinking of updating their short order tracking system using React.

Build a prototype of this short order receipts tracker.

Prerequisites

• React

Instructions

1. Fork and clone this repository.
2. Change into the new directory.
3. Install dependencies (npm i or npm install).
4. Check out to a new branch with git checkout -b dev.
5. Fulfill the listed requirements.

Requirements

Follow the walkthrough and finish all parts.

Part 1: Sample Receipts

You'll be rendering some sample receipts:

const receipts = [
  {
    id: 1,
    person: 'Jeremy',
    order: {
      main: 'Burrito',
      protein: 'Skirt Steak',
      rice: 'Purple Rice',
      sauce: 'Green Crack',
      toppings: ['Baby Bok Choy', 'Cucumber Kimchi'],
      drink: 'Thai Iced Tea',
      cost: 22,
    },
    paid: false,
  },
  {
    id: 2,
    person: 'Brittany',
    order: {
      main: 'Rice Bowl',
      protein: 'Ginger Chicken',
      rice: 'Sticky Rice',
      sauce: 'Korilla',
      toppings: ['Yuzu Pickled Sweet Pepper', 'Kale'],
      drink: 'Korchata',
      cost: 19,
    },
    paid: false,
  },
  {
    id: 3,
    person: 'Tiffany',
    order: {
      main: 'Salad Bowl',
      protein: 'Organic Tofu',
      rice: 'none',
      sauce: "K'lla",
      toppings: ['Blue Potato Salad', 'Pico De Gallo', 'Red Kimchi'],
      drink: 'Sparkling Blood Orange Soda',
      cost: 20,
    },
    paid: false,
  },
];

Make a Receipt component that renders the following data from the first receipt:

• person
• order
  • main
  • protein
  • rice
  • sauce
  • drink
  • cost

Optional: render the toppings

Part 2: Conditionally render the receipts

Right now, all the receipts are not paid.

Modify App.js to only render a component if the receipt has not been paid.

Then go into the receipt data and change a paid value to true, then verify that the receipt disappears.

Part 3: Add a click handler to update the data

Obviously we don't want to have to manually update the data to show that it is paid. Make a function that updates the paid property in state to be true when the receipt is clicked.

Plagiarism

Take a moment to refamiliarize yourself with the Plagiarism policy. Plagiarized work will not be accepted.

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].