Mapしている配列オブジェクトのjsxに配列の番号に適応したinlinestyleインラインスタイルを当てたい

arrayの配列は実際はContenfulからfetchしており、配列の数、または新しいobjectを追加したり、削除したり、日によって違います。　なので、配列のobjectに直接valueを加えない方法を模索しています。

配列の1番目に適用したいスタイル　 animationDelay: 0s
配列1の2番目に適用したいスタイル　animationDelay: 3s
配列2の3番目に適用したいスタイル　 animationDelay: 6s

import React from 'react';
import styled from "@emotion/styled";

const InfoTitle = styled.div({
});

const  App = () => {
  const array = [
    {
      title: 'news1',
      content: 'brabrabrabra1',
    },
    {
      title: 'news2',
      content: 'brabrabrabra2',
    },
    {
      title: 'news3',
      content: 'brabrabrabra3',
    }
  ]
  
  return (
      <>
      {array.map((item, i) => (<InfoTitle　key={i}>{item.title}</InfoTitle>))}
      </>
  )

}

export default App;

行動規範の内容に同意します

回答1件

ベストアンサー

以下のように修正してみると、いかがでしょうか？

diff
1-     const InfoTitle = styled.div({
2-     });
3+     const InfoTitle = styled.div`
4+       animation-delay: ${props => props.index * 3}s;
5+     `;

diff
1-      {array.map((item, i) => (<InfoTitle　key={i}>{item.title}</InfoTitle>))}
2+      {array.map((item, i) => (
3+        <InfoTitle key={i} index={i}>
4+          {item.title}
5+        </InfoTitle>
6+      ))}