Looped data into List.jsx and into Home.jsx #19
Conversation
|
Visit the preview URL for this PR (updated for commit 2ffcca0): https://tcl-76-smart-shopping-list--pr19-sm-eb-read-shopping-11v5vu6k.web.app (expires Sun, 25 Aug 2024 16:23:54 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 512b1a88be8ae05fd3e727b99332819df760271d |
| * so we can see which lists the user has access to. | ||
| */} | ||
| {/* insert path as prop later */} | ||
| {data && |
There was a problem hiding this comment.
Good job with including a null check here!
| @@ -7,6 +7,10 @@ export function List({ data }) { | |||
| Hello from the <code>/list</code> page! | |||
| </p> | |||
| <ul> | |||
| {data && | |||
| data.map((list) => { | |||
| return <ListItem key={list.id} name={list.name} />; | |||
There was a problem hiding this comment.
I like that you all passed the key prop here to the list item!
src/views/Home.jsx
Outdated
| key={list.id} | ||
| name={list.name} | ||
| setListPath={setListPath} |
There was a problem hiding this comment.
Now that we have the right data structure in Firebase, go ahead and add the path here! This should work with that change! 👍
There was a problem hiding this comment.
Added it! Also, there was an error that the keys weren't unique so used the randomUUID() method to pass into the keys for now.
src/views/Home.jsx
Outdated
| key={crypto.randomUUID()} | ||
| name={list.name} | ||
| setListPath={setListPath} | ||
| path={path} |
There was a problem hiding this comment.
This path actually comes from the list item itself!
| path={path} | |
| path={list.path} |
src/views/Home.jsx
Outdated
|
|
||
| export function Home({ data, setListPath }) { | ||
| import { SingleList } from '../components'; | ||
| export function Home({ data, setListPath, path }) { |
There was a problem hiding this comment.
See other comment - the path comes from the list itself.
| export function Home({ data, setListPath, path }) { | |
| export function Home({ data, setListPath }) { |
For an example of how to fill this template out, see this Pull Request.
Description
Sarah and I worked on task #2. We updated Home.jsx and List.jsx to loop over the data and render the names of each shopping list a user is subscribed to, as well as the names of each item. One thing to note is that we haven’t inserted the path prop in Home.jsx, as we need further information to create the path. Since we don’t have a database created yet, we attempted to navigate to the /list page, except for one error from firebase.js, there are no errors caused by our implementation.
Related Issue
Acceptance Criteria
Type of Changes
featureUpdates
Before
After
Testing Steps / QA Criteria