TypeError: Cannot read properties of undefined (reading 'slice')

This happens in the following code snippet:

topEvents?.results.slice(0, 6).map((event) => ( ... ))

When results is undefined, .slice() breaks the component render.

Additionally, the empty state experience could be improved. At the moment, it doesn’t clearly communicate when there are no events available.

Steps to Reproduce

1. Go to the landing page where OurEvents is rendered.
2. Ensure the events API returns no data or an unexpected response shape.
3. Observe the console error and broken UI.

Expected Behavior

• Component should handle cases when results is undefined or empty safely.
• Empty state should gracefully display a message/icon instead of crashing.

Suggested Solution

• Guard against undefined by checking Array.isArray(topEvents?.results) before slicing.
• Provide a meaningful empty state using a Lucide CalendarX icon and descriptive text.
• Keep consistent styling with Tailwind to match the design system.

Example fix:

{Array.isArray(topEvents?.results) && topEvents.results.length > 0 ? (
  topEvents.results.slice(0, 6).map((event) => (
    <UpcomingEventCard key={event.id} event={event} />
  ))
) : (
  <div className="size-full flex-center flex-col gap-4">
    <CalendarX className="text-green-500 size-16" />
    <p className="text-gray-500 text-base font-medium">
      No upcoming events found
    </p>
  </div>
)}

Additional Context

Fixing this will:

• Prevent runtime errors when no events are returned.
• Improve UX with a clear and consistent empty state.