Merge pull request #43 from the-collab-lab/sm-fix-key-bug

Add more keys and unique key props

src/views/Home.jsx

@@ -1,6 +1,6 @@
 import './Home.css';
 import { SingleList } from '../components';
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import { createList, useAuth } from '../api';
 import { useNavigate } from 'react-router-dom';
 
@@ -40,15 +40,15 @@ export function Home({ data, setListPath }) {
 			<ul>
 				{data &&
 					data.map((list) => {
+						const uniqueId = crypto.randomUUID();
 						return (
-							<>
+							<Fragment key={uniqueId}>
 								<SingleList
-									key={crypto.randomUUID()}
 									name={list.name}
 									setListPath={setListPath}
 									path={list.path}
 								/>
-							</>
+							</Fragment>
 						);
 					})}
 			</ul>

src/views/List.jsx

@@ -1,5 +1,5 @@
 import { ListItem } from '../components';
-import { useState, useEffect } from 'react';
+import { useState, useEffect, Fragment } from 'react';
 import BasicModal from './Modal';
 import { comparePurchaseUrgency } from '../api';
 
@@ -82,14 +82,14 @@ export function List({ data, userId }) {
 			<ul>
 				{filteredObject &&
 					Object.entries(filteredObject).map(([timeBucket, list]) => (
-						<>
+						<Fragment key={crypto.randomUUID()}>
 							<div>
 								<h3>{labels[timeBucket]}</h3>
 							</div>
 							{list.map((item) => (
-								<ListItem key={item.id} item={item} />
+								<ListItem item={item} key={crypto.randomUUID()} />
 							))}
-						</>
+						</Fragment>
 					))}
 			</ul>
 		</>