data-loader.js

import React, { Component } from 'react';

import * as Util from '../../util';
import Spinner from '../spinner';

export default class DataLoader extends Component {

    static defaultProps = {
        cache: 0,
        options: { },
        placeholder: null
    }

    state = {
        data: null
    }

    async componentDidMount () {
        const { url, options, cache } = this.props;
        const response = await Util.fetch(url, options, cache);
        const data = await response.json();

        this.setState({ data });
    }

    render () {
        const { data } = this.state;
        const { children, placeholder } = this.props;

        if (!data && !placeholder) {
            return <Spinner/>;
        }

        if (!data && placeholder) {
            return placeholder;
        }

        const elements = children(data);

        return Array.isArray(elements)
            ? <div>{ elements }</div>
            : elements;
    }
}