Наполнить разным контентом карточки (CardActionArea)

Есть блок <div>, в котором 6 карточек, стили из MUI(<CardActionArea/>), в другом файле есть масив объектов с контентом.

Мне нужно наполнить эти 6 карточек контентом из масив объектов.

Как это реализовать?

const Cards = [1,2,3,4,5,6];

export default function ProductBody(){
   
return(
    <Product>
      <div className="orb">
    <div className="body"> 
      
        {Cards.map((card) =>( 
    <Card sx={{ maxWidth: 400 }}>    
      <CardActionArea>
        <CardMedia
          component="img"
          height="247"
          image={serceSherst} onClick={zsu}
          alt="Ups.."
        />
        <CardContent>
          <div className="date">
            <img src={tablo} width="12px"/> June 29th 2021
          </div>
          <Typography gutterBottom variant="h5" component="div">
            Lorem ipsum dolor sit amet.
          </Typography>
          <Typography variant="body2" color="text.secondary">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa, deserunt eligendi molestiae exercitationem dolor doloremque animi quos a mollitia?
          </Typography>
        </CardContent>
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary" >
          <a href="https://www.dw.com/en/war-in-ukraine/t-60931789">More info -></a>
        </Button>
      </CardActions>
    </Card>
      ))}
    
    </div>
    </div> 
    </Product>
)
};


//masiv obj
export const cardsInfo = [{
    id: 1,
    image: imgFlag1 ,
    name: "The tragedy of Ukraine",
    date: '3rd March 2022',
    Typography: 'The full-scale invasion of Ukraine is less than a week old and most of us have watched in horror as Russian tanks rolled into a sovereign country ..',
    button:  "https://www.peacedirect.org/tragedy-ukraine-urgency-peacebuilding/?gclid=CjwKCAiAleOeBhBdEiwAfgmXf2lV_-3aJK6i55w9yPsnUZK1lX_msr5GqsD_mq8J-pe0BqbeocMilxoCKBcQAvD_BwE"
},
{
    id: 2,
    image: serceSherst ,
    name: "War in Ukraine",
    date: 'February 24th 2022',
    Typography: 'uyine since late February 2022. Millions have fled the country, while others stayed to fight.',
    button:  "https://www.dw.com/en/war-in-ukraine/t-60931789"
},
{
    id: 3,
    image: patrioti  ,
    name: "3",
    date: '33',
    Typography: '3333',
    button:  <a href="https://www.dw.com/en/war-in-ukraine/t-60931789">More info -></a>
},
{
    id: 4,
    image: serceSherst ,
    name: "44",
    date: '444',
    Typography: '444444...',
    button:  alert="44444"
},
{
    id: 5,
    image: serceSherst ,
    name: "55",
    date: '555',
    Typography: '55555',
    button:  alert="55555555"
},
{
    id: 6,
    image: serceSherst ,
    name: "66",
    date: '6666',
    Typography: '6666666666led the country, while others stayed to fight.',
    button:  alert="66666666666"
}
];


Ответы (1 шт):

Автор решения: Ivan Korotenko

Решение найдено, просто через "id" из массива объектов передал информацию.

→ Ссылка