Eventslist(upcomingevents)

[dvmhmdsd]

• Add the title of the page Our events, and a heading for upcoming event and another heading for past events. Also please use the eventCard Component.

[dvmhmdsd]

You should do the following:

1. Request the events.
2. Update the state with the response.
3. In JSX:
   • Loop across the data in the state.
   • Pass the single object to eventCard Component

--> Consider this code for illustration:

events.map(singleEvent => {
   return (
      <div className="custom-class">
         <EventCard event={singleEvent} />
     </div>
   )
});

[dvmhmdsd]

1. Use bootstrap's grid please.
2. If there's multiple upcoming events, they should be beside each other, if there's only 1 upcoming event, it should be alone in the row but don't take the whole row.

[dvmhmdsd]

The upcoming events should be beside each other and the card should take it's normal width and doesn't fill the whole row if it's single.

[dvmhmdsd]

Also there should be a padding for the list to get more space above the footer. Also use semantics and divide the page into sections.

<h1> .. </h1>
<section>
   <h2> .. </h2>
   ....
</section>
<section>
   <h2> .. </h2>
   ....
</section>

[dvmhmdsd]

Your work is awesome buddy, last edit: Center the upcoming events cards, so that if there's only one upcoming event it should be at the center.