Шаблон HOC для запроса данных на сервер

hocTemplate.jsx

import React from 'react';
import Spinner from '../components/Spinner';
import ErrorMessage from '../components/ErrorMessage';
import DataService from '../services/DataService';

export default function(WrappedComponent) {
  class withDataForComponent extends React.Component {
    constructor(props) {
      super(props);
      this.dataService = new DataService(props.id);
    }

    state = {
      data: [],
      loading: false,
      error: '',
    };

    async componentDidMount() {
      await this.getData();
    }
  
    onLoading = () => {
      this.setState({
        loading: true,
        error: '',
      })
    }
    
    onLoaded = (result) => {
      this.setState({
        data: result,
        loading: false,
        error: '',
      })
    }
    
    onError = (err) => {
      this.setState({
        loading: false,
        error: err.message,
      })
    }
  
    getData = async () => {
      this.onLoading();
      const data = await this.dataService.getData()
        .then(this.onLoaded)
        .catch(this.onError);
    }

    render() {
      const { loading, error, data } = this.state;
      return (
          {loading && <Spinner />}
          {error && <ErrorMessage message={error} />}
          {!loading && !error && <WrappedComponent {...this.props} />}
      );
    }
  }

  return withDataForComponent;
}