how to display information by params of an object array in a component in React JS

Question

I have two files, Listcurses and Cardcurses, in Listcurses I have an array of objects and I’m trying to perccorer and display the information in another component (Cardcurses) by props, but the page returns this error message " Typeerror: Cannot read Property 'image' of Undefined ". If anyone can help me I’d be grateful, thank you!

Cardcurses.jsx

import React, { Component } from "react";
import { Card } from "antd";

const { Meta } = Card;

function CardCurses(props) {
  return (
    <Card
      hoverable
      style={{ width: 200, height: 240, padding: "10px" }}
      cover={<img alt="example" src={props.text.image} />}
    >
      <Meta title={props.text.title} description={props.text.descricao} />
    </Card>
  );
}

export default CardCurses;

Listcurses

import React from "react";
import Card from "../CardCurses/CardCurses";

function ListCurses() {
   const cursos = [
    {
      title: "React JS",
      descricao: "React é legal",
      image: "https://pt-br.reactjs.org/logo-og.png"
    },
    {
      title: "React Native",
      descricao: "React Native é legal",
      image: "https://miro.medium.com/max/1000/1*GkR93AAlILkmE_3QQf88Ug.png"
    },
    {
      title: "Antd",
      descricao: "Antd é legal",
      image: 
      "https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
    }
   ];

  const returnCurses = cursos.map((curse, i) => {
  return (
      <div key={i}>
        <Card text={curse} />
      </div>
    );
  });
  return <div>{returnCurses}</div>;
}


export default ListCurses;

Answer 1

I recommend you do the following test, pass each value to your "Cardcurses" as a separate props, this way:

<Card title={curse.title} descricao={curse.descricao} image={curse.image}/>

Change your "Cardcurses" to unstructure the received props, your changed code would be this:

const CardCurses = ({title, descricao, show }) => {
 return (
    <Card
      hoverable
      style={{ width: 200, height: 240, padding: "10px" }}
      cover={<img alt="example" src={image} />}
    >
      <Meta title={title} description={descricao} />
    </Card>
  );
}