As a user when I navigate to the My Plants page I should see all my plants displayed on nice cards
AC
WHEN the page loads
THEN I should see all the plants I own displayed on cards
AND they should be bootstrap cards
Dev Notes
[x] In the MyPlants component set the state of plants to an empty array, then create a function called getPlants that will call the getPlantsByUid from plantData.js then set the state
[x] Create a componentDidMount() function and call this.getPlants
[x] inside the render make a variable called buildPlantCards that maps over the plants in state and creates `
[x] Inside the return make a button that opens a modal form for adding a new plant
[x] inside the return make a <div className="d-flex flex-wrap"> and them call {buildPlantCards}
[x] Inside the MyPlants component establish the prop-types, import the plantShape
[x] Define the props and links inside the render
[x] Make a bootstrap card that has a delete button at the top, displays the image at the top of the card, followed by the name of the plant, and which room it is located in
[x] The card should also have two buttons, one that links to the single-view for the plant and another that links to a modal for editing
User Story
AC
WHEN the page loads THEN I should see all the plants I own displayed on cards AND they should be bootstrap cards
Dev Notes
[x] In the
MyPlants
component set the state of plants to an empty array, then create a function calledgetPlants
that will call thegetPlantsByUid
fromplantData.js
then set the state[x] Create a
componentDidMount()
function and callthis.getPlants
[x] inside the render make a variable called
buildPlantCards
that maps over the plants in state and creates `[x] Inside the return make a button that opens a modal form for adding a new plant
[x] inside the return make a
<div className="d-flex flex-wrap">
and them call{buildPlantCards}
[x] Inside the
MyPlants
component establish the prop-types, import theplantShape
[x] Define the props and links inside the render
[x] Make a bootstrap card that has a delete button at the top, displays the image at the top of the card, followed by the name of the plant, and which room it is located in
[x] The card should also have two buttons, one that links to the single-view for the plant and another that links to a modal for editing