Наполнить разным контентом карточки (CardActionArea)
Есть блок <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"
}
];
Источник: Stack Overflow на русском