DataLoadingViaRenderProps

Example.js

import React from 'react';
import Tile from './Tile';
import {WithRequest} from './withRequest';
import Api from '../Api';
import Loading from './Loading';

const OnBoardingTemplates = () => <Tile
  title="Users"
  to="/users"
  actionLabel="Add New"
>
  <WithRequest
    fetch={() => Api.templates()}
    prop="templates"
    LoadingComponent={Loading}
  >
    {({templates}) => templates.map(template => <div>
      {template.name}
    </div>)}
  </WithRequest>
</Tile>


export default OnBoardingTemplates;
                                    
// withRequest.js
export class WithRequest extends React.Component {
  static defaultProps = {
    fetch: () => {},
    prop: 'data',
    LoadingComponent: null,
    children: () => null
  };
  componentWillMount() {
    this.fetch();
  }
  fetch = async () => {
    try {
      this.setState({
        ...this.state,
        loading: true,
        errorLoading: false
      });
      const result = await this.props.fetch();
      this.setState({
        ...this.state,
        [this.props.prop]: result
      });
    } catch (e) {
      this.setState({
        ...this.state,
        errorLoading: true,
        loading: false
      });
    }
  }
  render() {
    if (this.props.LoadingComponent) {
      return <this.props.LoadingComponent error={this.state.errorLoading} loading={this.state.loading}>
          {this.props.children(this.state)}
      </this.props.LoadingComponent>
    }
    return this.props.children(this.state);
  }
}