Let's now think about which React components we will need for our event list. The following diagram shows an overview of the components that we will be building:
An overview of the components that the event list will be built of
These components will have the following responsibilities:
- The
EventListContainercomponent will be responsible for loading the event list from the backend service and managing the event list in its own state. It will then pass the current set of events down to the props of theEventListcomponent. - The
EventListcomponent will be responsible for rendering the container in which the event list will be presented. For starters, we will choose a simple table view. This table will then be filled with a set ofEventListItem, one for each event. - The
EventListItemcomponent will render a single Event item in the event list.
Technically, we could make the EventList component do both—load the events from the backend service and manage the event...