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

Рейтинг: 1Ответов: 1Опубликовано: 03.02.2023

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

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

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

export default function ProductBody(){
   const zsu = () => [alert("Did you help ZSU with a coin?!"), alert("Or are you not love zsu???!!!!😡😡😡😡😡")] ;
return(
    <Product>
      <div className="orb">
    <div className="body"> 
      
        {Cards.map((card) =>( 
    <Card sx={{ maxWidth: 400 }}>    
      <CardActionArea>
        <CardMedia
          component="img"
          height="247"
          image={card.img} onClick={zsu}
          alt="Ups...."
        />
        <CardContent>
          <div className="date">
            <img src={tablo} width="12px"/> 
            {card.date}
          </div>
          <Typography gutterBottom variant="h5" component="div">
            {card.name}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            {card.Typography1}
          </Typography>
        </CardContent>
        
      </CardActionArea>
      <CardActions>
        <Button size="small" color="primary" >
          <a href={card.knopka}>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"
}
];

Ответы

▲ 0

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