fetcher-render-prop.jsx

import * as React from 'react'

class Fetcher extends React.Component {
  constructor() {
    this.state = {
      loading: true,
      data: {},
    }
  }

  componentDidMount() {
    fetch(this.props.url)
      .then(res => res.json())
      .then(data => {
        this.setState({ loading: false, data })
      })
  }

  render() {
    const { loading, data } = this.state
    if (loading) {
      return <div>loading...</div>
    }
    return this.props.children({ data })
  }
}

const UserProfile = () => (
  <Fetcher url="/api/user">
    {props => (
      <div>
        <h1>{props.data.username}</h1>
        <p>{props.data.profile}</p>
      </div>
    )}
  </Fetcher>
)

const TweetList = () => (
  <Fetcher url="/api/tweets">
    {props =>
      props.data.tweets.map(tweet => (
        <span key={tweet.id}>
          {tweet.user}: {tweet.body}
        </span>
      ))
    }
  </Fetcher>
)

thanks