传递一组对象作为 React 组件的 props

Question

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>
  );
}

Answer 1

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>
  );
}