CalendarFeedSummary.tsx

import * as React from 'react';
import { ICalendarEvent, ICalendarService } from '../../../shared/services/CalendarService';
import { MockCalendarService } from '../../../shared/services/CalendarService/MockCalendarService';
import styles from './CalendarFeedSummary.module.scss';
import { ICalendarFeedSummaryProps, ICalendarFeedSummaryState } from './CalendarFeedSummary.types';

export default class CalendarFeedSummary extends React.Component<ICalendarFeedSummaryProps, ICalendarFeedSummaryState> {
  constructor(props: ICalendarFeedSummaryProps) {
    super(props);
    this.state = {
      isLoading: false,
      events: [],
    };
  }

  public componentDidMount(): void {
      this._loadEvents();
  }

  public render(): React.ReactElement<ICalendarFeedSummaryProps> {
    return (
      <div className={ styles.calendarFeedSummary }>
      <ul>
       { this.state.events.map(e=>{
         return <li>{e.title}</li>;
       })}
       </ul>
      </div>
    );
  }

  private _loadEvents(): Promise<void> {

    // nothing in cache, load fresh
    const dataProvider: ICalendarService = new MockCalendarService();
    if (dataProvider) {
      this.setState({
        isLoading: true
      });

      return dataProvider.getEvents().then((events: ICalendarEvent[]) => {
        // don't cache in the case of errors
        this.setState({
          isLoading: false,
          events: events
        });
        return;
      }).catch((error: any) => {
        console.log("Exception returned by getEvents", error.message);
        this.setState({
          isLoading: false,
          events: []
        });
      });
    }
  }

}

CalendarFeedSummary.types.ts

import { ICalendarEvent } from "../../../shared/services/CalendarService";

export interface ICalendarFeedSummaryProps {
  description: string;
}

export interface ICalendarFeedSummaryState {
  isLoading: boolean;
  events: ICalendarEvent[];
}

CalendarFeedSummaryWebPart.ts

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField
} from '@microsoft/sp-webpart-base';

import * as strings from 'CalendarFeedSummaryWebPartStrings';
import CalendarFeedSummary from './components/CalendarFeedSummary';
import { ICalendarFeedSummaryProps } from './components/CalendarFeedSummary.types';
import { ICalendarFeedSummaryWebPartProps } from './CalendarFeedSummaryWebPart.types';


export default class CalendarFeedSummaryWebPart extends BaseClientSideWebPart<ICalendarFeedSummaryWebPartProps> {

  public render(): void {
    const element: React.ReactElement<ICalendarFeedSummaryProps > = React.createElement(
      CalendarFeedSummary,
      {
        description: this.properties.description
      }
    );

    ReactDom.render(element, this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse("1.0");
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField("description", {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}