Merge pull request #19 from the-collab-lab/sm-eb-read-shopping-list-a…

…nd-items

Looped data into List.jsx and into Home.jsx

src/views/Home.jsx

@@ -1,16 +1,23 @@
 import './Home.css';
-
+import { SingleList } from '../components';
 export function Home({ data, setListPath }) {
 	return (
 		<div className="Home">
 			<p>
 				Hello from the home (<code>/</code>) page!
 			</p>
 			<ul>
-				{/**
-				 * TODO: write some JavaScript that renders the `lists` array
-				 * so we can see which lists the user has access to.
-				 */}
+				{data &&
+					data.map((list) => {
+						return (
+							<SingleList
+								key={crypto.randomUUID()}
+								name={list.name}
+								setListPath={setListPath}
+								path={list.path}
+							/>
+						);
+					})}
 			</ul>
 		</div>
 	);

src/views/List.jsx

@@ -7,11 +7,10 @@ export function List({ data }) {
 				Hello from the <code>/list</code> page!
 			</p>
 			<ul>
-				{/**
-				 * TODO: write some JavaScript that renders the `data` array
-				 * using the `ListItem` component that's imported at the top
-				 * of this file.
-				 */}
+				{data &&
+					data.map((list) => {
+						return <ListItem key={list.id} name={list.name} />;
+					})}
 			</ul>
 		</>
 	);