myComponent.map is not a function

I have this information right now that i’m saving and trying to pass to a component who then tries to create Tabs and TabPanel (Material-ui components) with said info.

The declaration of that info goes as follow :

let eventCard = [
    {
        title: "Le sommet",
        learnMore: true,
        description:"5 jours de conversations inspirantes avec des explorateurs, des influenceurs et des experts qui réfléchissent au tourisme de demain.",
        eventCalendar: [
            {
                date: "3 mai 2021",
                location: "11h à 13h, Québec (UTC-4)"
            }
        ]
    },
    {
        title: "Le sommet",
        learnMore: true,
        description:"5 jours de conversations inspirantes avec des explorateurs, des influenceurs et des experts qui réfléchissent au tourisme de demain.",
        eventCalendar: [
            {
                date: "3 mai 2021",
                location: "11h à 13h, Québec (UTC-4)"
            }
        ]
    }
]

I then proceed to pass said info to my component:

<EventCard eventCard={eventCard}/>

On the other side i have an interface that contains the same information:

interface IEventCard {
    title?: string;
    learnMore?: boolean;
    description: string;
    eventCalendar?: IEventCalendar[];
}

and it is received as such in the function eventCard:

export default function EventCard(eventCard : IEventCard[]) {

    const [value, setValue] = useState(1);

    const handleChange = (event: any, newValue: React.SetStateAction<number>) => {
        setValue(newValue);
    };

    return (
        <Grid className='EventCard-Background' container spacing={3}>
            <Tabs value={value} onChange={handleChange}>
                {eventCard && GenerateTabs(eventCard)}
            </Tabs>
            {GenerateTabPanels(eventCard, value.toString())}
        </Grid>
    );
}

In the console the object looks as follow: eventCard: eventCard Array(2)

The problem is that when i then try to use eventCard.map on it, it fails saying that eventCard.map is not a function and using Array.Array(eventCard) shows that eventCard is not even an array. I’m not sure to understand how to fix this problem.

Sorry if the question is a bit messy it’s my first question here. I welcome advise in also making my questions more clear.

Answer

You must receive props and use props.EventCard inside component or either desctruct it with {eventCard}

export default function EventCard(props)

export default function EventCard({eventCard : IEventCard[]})

Advertisement

Answer