bakery-data.js

export const productData = [
  { id: 1, name: "rapsberry petit four", cost: 199, calories: 131, img: "https://images-gmi-pmc.edge-generalmills.com/5a0d7c12-022f-4f05-9b80-4e9b28dc7029.jpg" },
  { id: 2, name: "shortbread cookie", cost: 89, calories: 142, img: "https://www.noracooks.com/wp-content/uploads/2019/12/IMG_9575.jpg" },
  { id: 3, name: "chocolate croissant", cost: 295, calories: 470, img: "https://t4.ftcdn.net/jpg/02/81/07/59/240_F_281075992_X7unLnUXPnyhQcwiOtjtkeNUfQEshr44.jpg" },
  { id: 4, name: "red velvet cupcake", cost: 349, calories: 439, img: "https://thenovicechefblog.com/wp-content/uploads/2010/09/Red-Velvet-Cupcakes-1-720x720.jpg" },
  { id: 5, name: "lemon square", cost: 189, calories: 275, img: "https://images-gmi-pmc.edge-generalmills.com/48e8b8e5-409f-414c-96f7-cbb42afb43ef.jpg" },
  { id: 6, name: "pistachio macarons", cost: 249, calories: 97, img: "https://i2.wp.com/www.piesandtacos.com/wp-content/uploads/2018/10/pistachio-macarons-29.jpg?w=600&ssl=1" }
]

instructions.md

Part I

1. Draw a component diagram. Draw boxes around the components you believe are needed for this application
2. In your reaact learning folder, create a new react app called bakery-app npx create-react-app bakery-app
3. Create the necessary components to render the data to the page
4. Write a helper function to format the cost with two decimal places

Part II

1. Add an Add to favs button to each item
2. When you click the button, log the name of the food item

Part III

When you click the button...

1. the button text toggles between "Add to favs" and "Remove from favs"
2. add the name of the bakery item to a favorites list