In this activity, we will map over a list of data and render components from each piece of data.
Replace your React application’s src folder with src. Stop the dev server if it is already running. Start the app in dev mode by running npm start.
This activity uses Bootstrap, so make sure you import 'bootstrap/dist/css/bootstrap.min.css'; in index.js.
Open the application in your web browser and study the rendered application. Then take a minute to study the included components:
App: Our application’s root component.
List: Responsible for rendering an unordered list from props.data.
Modify the List component so that, inside of its ul tags, it renders one li tag for each item in an array of grocery objects being passed via props. Each li tag should display the text property of each grocery object. The array map method should be used for this.
For styling purposes, give each li tag a class of list-group-item.
You should definitely look at React’s documentation for lists and keys.
See MDN documentation for Array.prototype.map.
You will only need to modify the List component.
List component, render a list of only the groceries that have not been purchased. Use the Array.prototype.filter to filter the array before mapping.