FetchData React Component Using Render Props

fetch-data.js

class FetchData extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            results: [],
            error: false
        }
    }

    componentDidMount() {
        this.fetchData(this.props.url)
    }

    fetchData(url) {
        this.setState({ loading: true })

        fetch(url)
            .then(data => data.json())
            .then(json => {
                this.setState({ loading: false, results: json })
            })
            .catch(error => {
                this.setState({ loading: false, error: true })
            })
    }

    render() {
        return this.props.render({
            loading: this.state.loading,
            results: this.state.results,
            error: this.state.error
        })
    }
}