I am encountering the error message "Each child in a list should have a unique key prop" when I try to render my content
App.js
const blogPosts = [
{
title: '...',
description:
'...',
},
{
title: '...',
description:
'...',
},
{
title: '...',
description:
'...',
},
];
const App = () => {
return (
<Blog post={blogPosts} /> )
Blog.js
<Typography gutterBottom variant="h6" component="h2" className={classes.typoTitle}>{
[post[0]].map(title0 => <div>{title0.title}></div>)
}
</Typography>
<Typography component="h1" variant="subtitle1" color="inherit" gutterBottom>
{
[post[0]].map(title0 => <div> {title0.description}></div>)
}
</Typography>
I am repeating this process for the other props from my const in App.js by changing the index of my key post ([post[0]],[post[1]],[post[2]]).
After adding a key, the error message disappears but my props are not displayed.
<Typography gutterBottom variant="h6" component="h2" className={classes.typoTitle}>{
[post[0]].map(title0 => <div key={title0.title}></div>)
}
</Typography>
<Typography component="h1" variant="subtitle1" color="inherit" gutterBottom>
{
[post[0]].map(title0 => <div key={title0.description}></div>)
}
</Typography>
Thank you for your assistance.