Наполнить разным контентом карточки (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" из массива объектов передал информацию.