Open kmylo opened 3 years ago
That was because you didn't put key on your articles.map so eslint marked your line of code. Just put the key in your map and you should be fine
import articleStyles from "../styles/Article.module.css";
import ArticleItem from "./ArticleItem";
const ArticleList = ({ articles }) => {
return (
<div className={articleStyles.grid}>
{articles.map((article, key) => (
<ArticleItem key={key} article={article} />
))}
</div>
);
};
export default ArticleList;
thanks farisadlin
That was because you didn't put key on your articles.map so eslint marked your line of code. Just put the key in your map and you should be fine
import articleStyles from "../styles/Article.module.css"; import ArticleItem from "./ArticleItem"; const ArticleList = ({ articles }) => { return ( <div className={articleStyles.grid}> {articles.map((article, key) => ( <ArticleItem key={key} article={article} /> ))} </div> ); }; export default ArticleList;
It is an anti-pattern to use index as key prop
unique id
, just use it first, and use the index
as a fallback solution.
uid
meanings theunique id
import articleStyles from "../styles/Article.module.css";
import ArticleItem from "./ArticleItem";
const ArticleList = ({ articles }) => {
return (
<div className={articleStyles.grid}>
{articles.map((article, key) => (
<ArticleItem key={article.uid || key} article={article} />
))}
</div>
);
};
export default ArticleList;