React & HOC

HOC

import React from 'react'
import fetch from 'isomorphic-fetch'

const DataComponent = (ComposedComponent, url) => {
    return (
        class DataComponent extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                    data: [],
                    loading: false,
                    loaded: false
                }
            }

            componentWillMount() {
                this.setState({loading: true});
                console.log(this.props)
                fetch(url)
                    .then(response => response.json())
                    .then(data => this.setState({
                        loaded: true,
                        loading: false,
                        data
                    }))
            }

            render() {
                return (
                    <div>
                        {(this.state.loading) ?
                            <div>loading...</div> :
                            <ComposedComponent {...this.state} {...this.props}/>
                        }
                    </div>
                )
            }
        }
    )
}

export default DataComponent

Demo

import React from 'react'
import DataComponent from "./dataComponent";

const CountryNames = ({data, selected = ""}) =>
    // console.log(selected);
    <select defaultValue={selected}>
        {data.map(({name}, i) =>
            <option key={i} value={name}>{name}</option>
        )}
    </select>

const CountryDropDown = DataComponent(
    CountryNames,
    "https://restcountries.eu/rest/v1/all"
)

export default CountryDropDown

import React from 'react'
import DataComponent from './dataComponent'

const People = ({data}) => {
    return (
        <ol>
            {data.results.map((person, i) => {
                const {first, last} = person.name;
                return <li key={i}>{first} {last}</li>
            })}
        </ol>
    )
}

const RandomMeUsers = DataComponent(
    People,
    "https://randomuser.me/api/"
)

export default RandomMeUsers