I am currently storing information that I am trying to pass to a component responsible for creating Tabs and TabPanel components (Material-UI) based on the provided data.
Here is how the information is structured:
let eventCard = [
{
title: "The Summit",
learnMore: true,
description: "5 days of inspiring conversations with explorers, influencers, and experts discussing the future of tourism.",
eventCalendar: [
{
date: "May 3, 2021",
location: "11am to 1pm, Québec (UTC-4)"
}
]
},
{
title: "The Summit",
learnMore: true,
description: "5 days of inspiring conversations with explorers, influencers, and experts discussing the future of tourism.",
eventCalendar: [
{
date: "May 3, 2021",
location: "11am to 1pm, Québec (UTC-4)"
}
]
}
]
Next, I pass this information to my component like so:
<EventCard eventCard={eventCard}/>
On the other end, I have an interface containing the same details:
interface IEventCard {
title?: string;
learnMore?: boolean;
description: string;
eventCalendar?: IEventCalendar[];
}
This information is received 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>
);
}
When viewing the object in the console, it appears as follows: eventCard: eventCard Array(2)
The issue arises when attempting to use eventCard.map, resulting in an error stating that eventCard.map is not a function. Even running Array.Array(eventCard) indicates that eventCard is not an array. I am uncertain how to resolve this problem.
Apologies if this question seems disorganized; it is my first post here. Any guidance on improving clarity in my future questions would be appreciated.