render list items on List component

[Amy-Pr]

Description

This code renders data fetched from the backend on the List component. We created a map function to map over each element in the data array and create a ListItem component to display for each element.

Learning: We reviewed how to use Chrome React tools to look at the shape of the props being passed.

Related Issue

closes #1

Acceptance Criteria

• The streamListItems function is used in App.jsx to get the items in the current list from the Firestore database
• The list is passed into the List component as a prop named data.
• In List.jsx, the ListItem component is used to render the name of each item

Type of Changes

	Type
	🐛 Bug fix
✓	✨ New feature
	🔨 Refactoring
	💯 Add tests
	🔗 Update dependencies
	📜 Docs

Updates

Before

After

Testing Steps / QA Criteria

• Open the Smart Shopping List app
• Direct browser to the list page by adding /list to the url

[github-actions]

Visit the preview URL for this PR (updated for commit e203c48):

https://tcl-57-smart-shopping-list--pr15-ap-jg-render-list-it-hvlk1cdc.web.app

_{(expires Tue, 11 Apr 2023 22:09:16 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: ad3eb6c34c2ec5986fcc218178df5985eb9c9ffb}

[emilysellers]

This looks great. The map function is successfully rendering each list item name.

[bethmelmtv]

All of the links. No issues with the code. Great work!

[danainjax]

Great work @Amy-Pr and @jongranados. Looks very clean.

[danainjax]

Code looks good! You can also choose to destructure the item object to pass the attributes without dot notation, if you wish.

{data.map(({ name, id }) => ( <ListItem key={id} name={name} /> ))}