DockList.js

import React from 'react';
import React, { Component } from 'react';
import classNames from 'classnames';
import { eventName, eventTime, eventStatus, getTitle } from './DockListHelpers';
import './EventList.css';

function EventItem(eventItem: DockData, eventTitle: string): ReactComponent { 
  return (
    <li 
      className="EventList-item admin-page-list-item" 
      key={eventItem.id}>
      <div className="event-info">
        <div className="event-name">
          {eventName(eventItem)}
          {eventTitle}
        </div>
        <div className="event-time"></div>
        <div className={classNames('event-status')}></div>
      </div>
    </li>
  );
}

type Props = { docks: DockData[] };

class DockList extends Component {
    constructor(props: Props) {
      super(props);
      this.state = {
        docTitleMap: {} // a simple map of the form {eventId: eventTitle}
      };
    }

    componentDidMount() {
      this.fetchEventTitles();
    }

    fetchEventTitles() {
      let titleFetchPromises = [];
      this.props.docks.forEach((eventItem) => {
        titleFetchPromises.push(
          getTitle(eventItem.name.split('v=')[1])
            .then(data => {id: eventItem.id, title: data.title})
        );
      });

      Promise.all(titleFetchPromises)
        .then((results) => {
          let docTitleMap = Object.assign(...results);
          this.setState({docTitleMap});
        });
    }

    render() {
      let {docks} = this.props;
      let {docTitleMap} = this.state;
      return (
        <ul className="EventList admin-page-list">
          {
            !docs.length 
              ? <div className="EventList-empty">No events available</div>
              : docs.map(
                  eventItem => <EventItem eventItem={eventItem} eventTitle={docTitleMap[eventItem.id]}/>
                )
          }
        </ul>
      );
    }
}

export default DockList;