sarahholder / mushroom-picker

0 stars 0 forks source link

Show Mushrooms in the Forest #2

Closed sarahholder closed 4 years ago

sarahholder commented 4 years ago

User Story

As a user I should see all the mushrooms in the forest on page load

AC

WHEN looking at the main page I should see a forest that shows all the possible mushroom types to be picked

Dev Notes

  1. The mushroomData.js file should export a function called getMushrooms that returns an array of ALL the mushrooms
  2. Create a react state that has an empty forest array.
  3. Create a componentDidMount function outside the render in the app.js file.
  4. Create a const for the mushrooms. const { mushrooms } = this.state
  5. Insider the render return a div with the className = "App"
  6. Create an H1 tag with a heading called Forest.
  7. Create inside the return.
  8. Create a mushrooms.js file that renders mushroom cards and exports mushrooms.
  9. Create a forest.js file.
  10. Inside the render make function called makeMushrooms that returns `mushrooms.map((mushroom => ());
  11. Inside the forest.js file inside the render return a div with className="Mushrooms d-flex flex-wrap" and then call the {makeMushrooms}.

*** The App.js file should call the getMushrooms and getBasket and pass the arrays into the appropriate components (array of mushrooms goes to the Forest and basket array goes into Basket component).