You have a regular component called DogCard, a container component called DogsList, an App component, and a dogs.js file that is exporting an array of objects
On the DOM your application should show a list of dog images and a button for each image that says "Bark"
When a User clicks on the "Bark" button it should render text to the screen that says "Ruff"
When a User clicks on the button a second time the "Ruff" should be removed from the DOM
What are we practicing?
Making decisions about when we need state and which component should hold state
Learning and mapping component hierarchy
mapping through an array to render a list of components