Fetch as a component

Fetch.js

import React from 'react'
import PropTypes from 'prop-types'

import { request } from '../api'

class Fetch extends React.Component {
  static propTypes = {
    url: PropTypes.string.isRequired,
    render: PropTypes.func.isRequired,
    loader: PropTypes.element,
  }

  static defaultProps = {
    url: '',
    loader: null,
    render: () => {},
  }

  state = {
    isLoading: true,
    response: null,
  }

  fetch = async () => {
    const response = await request().get(this.props.url)
    this.setState({ isLoading: false, response })
  }

  componentDidMount() {
    this.setState({ isLoading: true }, this.fetch)
  }

  render() {
    if (this.state.isLoading) {
      return this.props.loader
    }

    return this.props.render({
      data: this.state.response.data,
    })
  }
}

export default Fetch