react: fix incorrect use of keys

Signed-off-by: Paul W. <lambdapaul@protonmail.com>

pages/index.tsx

@@ -7,28 +7,28 @@ import RecentPosts from '../components/recent-posts';
 import RootInfo from '../public/home.json';
 
 function Nav() {
-    const nav = Object.entries(RootInfo);
-    return (
-        <div className='block'>
-            <h2>Navigation</h2>
-            {
-                nav.map(([slug, info], i) => {
-                    return <Link key={i} href={slug} className='button green'>{info.title}</Link>
-                })
-            }
-        </div>
-    )
+	const nav = Object.entries(RootInfo);
+	return (
+		<div className='block'>
+			<h2>Navigation</h2>
+			{
+				nav.map(([slug, info]) => {
+					return <Link key={slug} href={slug} className='button green'>{info.title}</Link>
+				})
+			}
+		</div>
+	)
 }
 
 function HomePage() {
-    return (
-        <Layout>
-            <QuickLinks />
-            <RecentPosts />
-            <RecentNotes />
-            <Nav />
-        </Layout>
-    )
+	return (
+		<Layout>
+			<QuickLinks />
+			<RecentPosts />
+			<RecentNotes />
+			<Nav />
+		</Layout>
+	)
 }
 
 export default HomePage;

pages/notes/index.tsx

@@ -43,8 +43,8 @@ function NotesPage() {
                 || <table>
                     <tbody>
                         {notes.map(
-                            (note: any, i: number) => {
-                                return (<NoteEntry note={note} key={i} />);
+                            (note: any) => {
+                                return (<NoteEntry note={note} key={note.slug} />);
                             }
                         )}
                     </tbody>

pages/posts/index.tsx

@@ -26,8 +26,8 @@ function Posts() {
             <table>
                 <tbody>
                     {
-                        posts.map(([slug, post]: any, i: number) => {
-                            return <tr key={i} style={{ alignItems: 'center' }}>
+                        posts.map(([slug, post]: [string, any]) => {
+                            return <tr key={slug} style={{ alignItems: 'center' }}>
                                 <td style={{ display: 'inline-block', textAlign: 'right', fontSize: '0.9rem' }}>
                                     <div style={{ fontStyle: 'italics', fontSize: '.8rem' }}>{
                                         post.mtime && (post.mtime != post.otime) && `Updated ${date.toRelativeDate(new Date(post.mtime))}`