foster/website
1
0
Fork 0
Code Issues 8 Pull requests Activity

Add unique key prop for each child in a list

Browse source
This commit is contained in:
Foster Hangdaan 2023-12-11 19:19:55 -05:00
parent 51bd0fb948
commit eba10034a3
Signed by: foster
GPG key ID: E48D7F49A852F112
5 changed files with 10 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_components/PostListItem.tsx
View file

@ -8,7 +8,7 @@ export default function(props: Props) {
<a href={props.post.data.url} className="post-list-title">{props.post.data.title}</a> <a href={props.post.data.url} className="post-list-title">{props.post.data.title}</a>
<time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.post.data.date)}</time> <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(props.post.data.date)}</time>
<ul className="tag-list"> <ul className="tag-list">
{props.post.data.tags.map(tag => <li className="tag">{tag}</li>)} {props.post.data.tags.map((tag,index) => <li key={index} className="tag">{tag}</li>)}
</ul> </ul>
<p className="post-list-description">{props.post.data.description}</p> <p className="post-list-description">{props.post.data.description}</p>
</li> </li>

4
_includes/layouts/base.tsx
View file

@ -11,7 +11,7 @@ export default function({ title, description, children, comp, metas, links, auth
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1b26"/> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#1a1b26"/>
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#d5d6db"/> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#d5d6db"/>
{Array.isArray(metas) && metas.length > 0 && {Array.isArray(metas) && metas.length > 0 &&
metas.map(m => <meta name={m.name} content={m.content}/>) metas.map((m,index) => <meta key={index} name={m.name} content={m.content}/>)
} }
<link rel="stylesheet" href="/styles/main.css"/> <link rel="stylesheet" href="/styles/main.css"/>
<link rel="icon" type="image/png" href="/icons/tabicon-16.png" sizes="16x16" /> <link rel="icon" type="image/png" href="/icons/tabicon-16.png" sizes="16x16" />
@ -20,7 +20,7 @@ export default function({ title, description, children, comp, metas, links, auth
<link rel="icon" type="image/png" href="/icons/tabicon-128.png" sizes="128x128" /> <link rel="icon" type="image/png" href="/icons/tabicon-128.png" sizes="128x128" />
<link rel="icon" type="image/png" href="/icons/tabicon-196.png" sizes="196x196" /> <link rel="icon" type="image/png" href="/icons/tabicon-196.png" sizes="196x196" />
{Array.isArray(links) && links.length > 0 && {Array.isArray(links) && links.length > 0 &&
links.map(l => <link rel={l.rel} href={l.href} type={l.type} title={l.title}/>) links.map((l,index) => <link key={index} rel={l.rel} href={l.href} type={l.type} title={l.title}/>)
} }
</head> </head>
<body> <body>

8
_includes/layouts/post.tsx
View file

@ -7,13 +7,13 @@ export default function({ children, toc, footnotes }) {
<nav className="toc"> <nav className="toc">
<h2>Table of Contents</h2> <h2>Table of Contents</h2>
<ol> <ol>
{toc.map(item => ( {toc.map((item,index) => (
<li> <li key={index}>
<a href={`#${item.slug}`}>{item.text}</a> <a href={`#${item.slug}`}>{item.text}</a>
{item.children.length > 0 && {item.children.length > 0 &&
<ul> <ul>
{item.children.map(child => ( {item.children.map((child,i) => (
<li> <li key={i}>
<a href={`#${child.slug}`}>{child.text}</a> <a href={`#${child.slug}`}>{child.text}</a>
</li> </li>
))} ))}

2
blog/index.tsx
View file

@ -26,7 +26,7 @@ export default function({ nav, comp }) {
return ( return (
<ul className="post-list"> <ul className="post-list">
{nav.menu("/blog/posts").children.sort(sortPosts).map(post => <PostListItem post={post}/>)} {nav.menu("/blog/posts").children.sort(sortPosts).map((post,index) => <PostListItem key={index} post={post}/>)}
</ul> </ul>
); );
} }

4
index.tsx
View file

@ -56,8 +56,8 @@ export default function({ nav }) {
<a className="header-anchor" href="#latest-blog-posts">Latest Blog Posts</a> <a className="header-anchor" href="#latest-blog-posts">Latest Blog Posts</a>
</h2> </h2>
<ul> <ul>
{nav.menu("/blog/posts").children.sort(sortPosts).slice(0,5).map(post => ( {nav.menu("/blog/posts").children.sort(sortPosts).slice(0,5).map((post,index) => (
<li> <li key={index}>
<a href={post.data.url} >{post.data.title}</a> &mdash; <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time> <a href={post.data.url} >{post.data.title}</a> &mdash; <time className="post-list-date">{Intl.DateTimeFormat("en-CA", { dateStyle: "long" }).format(post.data.date)}</time>
</li> </li>
))} ))}