fetch.js

const Item = (props) => (
  <div className="item">
    <img src={ props.picture.thumbnail } />
  </div>
);

const List = (props) => (
  <div>
    {
      props.items.map((item, i) => (
        <Item { ...item } key={ i } />
      ))
    }
  </div>
);

class ListWithFetch extends React.Component {
  state = {
    items: []
  }
  async componentDidMount() {
    const response = await fetch(this.props.url);
    const { results: items} = await response.json();
    this.setState({
      items
    });
  }
  render() {
    return this.props.children(this.state.items);
  }
}



// and finally your app
ReactDOM.render(
  <div className="app">
    <ListWithFetch url="https://randomuser.me/api/?results=10">
      { (items) => (
        <List items={ items } />
      ) }
    </ListWithFetch>
  </div>
)