Quiero pasar una matriz de objetos a un componente secundario. Cada componente secundario debe devolver el valor del índice respectivo de dummyData.
Componente principal
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> ); }Componente secundario
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> ); }Dado que está tratando de iterar a través de una matriz, debe recorrer los elementos. Puede usar for , map o each , depende totalmente de usted.
Referir bucles: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
Básicamente, puede hacer esto en su componente principal:
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> ); } Y en su componente secundario (que es un componente funcional, por lo que no puede usar this allí), puede hacer
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> ); }