1- import { v4 as uuidv4 } from "uuid" ;
21import classNames from "classnames" ;
32
43import ArticleImage from "./article-image" ;
@@ -21,7 +20,7 @@ export default function ArticleContent({ type, content, display }) {
2120 < div className = { styles [ "article-content" ] } >
2221 < ul className = { classNames ( styles [ "article-list" ] , styles . vertical , { [ styles [ display ] ] : display } ) } >
2322 { content . map ( ( item ) =>
24- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
23+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
2524 { item . url && ! item . title
2625 ? < a href = { item . url } >
2726 < ArticleText text = { item . content } />
@@ -40,7 +39,7 @@ export default function ArticleContent({ type, content, display }) {
4039 < div className = { styles [ "article-list-content" ] } >
4140 < ul className = { classNames ( styles [ "article-list" ] , styles . vertical ) } >
4241 { content . map ( ( item ) =>
43- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
42+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
4443 < ArticleText textClass = { classNames ( styles [ "article-title" ] , "truncate-multiline" , "truncate-multiline-3" ) } text = { item . title } type = "h3" />
4544 { item . url && ! item . title
4645 ? < a href = { item . url } >
@@ -59,7 +58,7 @@ export default function ArticleContent({ type, content, display }) {
5958 return (
6059 < ul className = { classNames ( styles [ "article-list" ] , styles . horizontal ) } >
6160 { content . map ( ( item ) =>
62- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
61+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
6362 < ArticleImage imageClass = { styles [ "article-hero" ] } image = { item . image } />
6463 < div className = { styles [ "article-content" ] } >
6564 < ArticleText textClass = "truncate-multiline truncate-multiline-3" text = { item . text } type = "div" />
@@ -74,7 +73,7 @@ export default function ArticleContent({ type, content, display }) {
7473 return (
7574 < div className = { classNames ( layoutStyles [ "grid-container" ] , { [ layoutStyles [ display ] ] : display } ) } >
7675 { content . map ( ( item ) =>
77- < div key = { uuidv4 ( ) } className = { layoutStyles [ "grid-item" ] } >
76+ < div key = { item . id } className = { layoutStyles [ "grid-item" ] } >
7877 < ArticleImage imageClass = { styles [ "article-image-container" ] } image = { item . image } meta = { item . meta } />
7978
8079 { item . url
@@ -93,7 +92,7 @@ export default function ArticleContent({ type, content, display }) {
9392 return (
9493 < ul className = { classNames ( styles [ "article-list" ] , styles . vertical ) } >
9594 { content . map ( ( item ) =>
96- < li key = { uuidv4 ( ) } className = { styles [ "article-list-item" ] } >
95+ < li key = { item . id } className = { styles [ "article-list-item" ] } >
9796 < ArticleImage imageClass = { styles [ "article-image-container" ] } image = { item . image } />
9897 < ArticleText textClass = { classNames ( styles [ "article-title" ] , "truncate-multiline" , "truncate-multiline-3" ) } text = { item . title } type = "h3" />
9998 </ li >
0 commit comments