Merge pull request #20 from the-collab-lab/ec/an-issue-1

2. As a user, I want to read all of my shopping lists and the items in them.

src/views/Home.jsx

@@ -1,4 +1,5 @@
 import './Home.css';
+import { SingleList } from '../components/SingleList';
 
 export function Home({ data, setListPath }) {
 	return (
@@ -7,10 +8,14 @@ export function Home({ data, setListPath }) {
 				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.map((list) => (
+					<SingleList
+						key={list.name}
+						name={list.name}
+						path={list.path}
+						setListPath={setListPath}
+					/>
+				))}
 			</ul>
 		</div>
 	);

src/views/List.jsx

@@ -1,4 +1,4 @@
-import { ListItem } from '../components';
+import { ListItem } from '../components/ListItem';
 
 export function List({ data }) {
 	return (
@@ -7,11 +7,9 @@ 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.map((item) => (
+					<ListItem key={item.name} name={item.name} />
+				))}
 			</ul>
 		</>
 	);