I want to pass down an array of Objects to a child component. Each child component should return the value of the respective index of dummyData.
Parent Component
export default function MainContent() {
const dummyData = [
{
id: "1",
cardIMG: "test.png",
cardTitle: "Title",
cardText: "Text"
},
{
id: "2",
cardIMG: "test1.png",
cardTitle: "Title",
cardText: "Text"
}
];
return (
<div className="MainContainer">
<Card props={dummyData} />
<Card props={dummyData} />
</div>
);
}
Child Component
export default function Card(props) {
return (
<div className="CardContainer">
<div className="CardIMG">
<img src={this.props.CardIMG} alt="" />
</div>
<div className="TextContent">
<h2>{this.props.CardTitle}</h2>
<p className="TextBlock">{this.props.CardText}</p>
<button className="ReadMore">Read more</button>
</div>
</div>
);
}
Since you are trying to iterate through an array, you have to loop through the items. You can use for, map or each, totally upto you.
Refer loops: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
You can basically do this in your parent component:
export default function MainContent() {
const dummyData = [
{
id: "1",
cardIMG: "test.png",
cardTitle: "Title",
cardText: "Text"
},
{
id: "2",
cardIMG: "test1.png",
cardTitle: "Title",
cardText: "Text"
}
];
return (
<div className="MainContainer">
{dummyData.map((data) => {
<Card key={data.id} cardInfo={data} />
})
</div>
);
}
And in your child component(which is a functional component, so you can't use this in there), you can do
export default function Card(props) {
return (
<div className="CardContainer">
<div className="CardIMG">
<img src={props.cardInfo.cardIMG} alt="" />
</div>
<div className="TextContent">
<h2>{props.cardInfo.CardTitle}</h2>
<p className="TextBlock">{props.cardInfo.CardText}</p>
<button className="ReadMore">Read more</button>
</div>
</div>
);
}