React and async data

1-everything-in-monolith-component.js

import React from 'react'
import ReactDOM from 'react-dom'

class App extends Component {
   getInitialState(){
    return {data: ''}
   }
   componentWillMount(){
     this.props.dataPromise.then(data => this.setState({data}))
   }
   render(){
     return (<p>{this.state.data}</p>)
   }
}
             
const dataPromise = Promise.resolve("Hello World")
ReactDOM.render(<App dataPromise={dataPromise}/>, document.body)

2-functions.js

import React from 'react'
import ReactDOM from 'react-dom'

const makeHTML = data => (<p>{data}</p>)
const dataPromise = Promise.resolve("Hello World")
dataPromise.then(data => 
   ReactDOM.render(makeHTML(data), document.body)
)

3-higher-order-components.js

import React from 'react'
import ReactDOM from 'react-dom'
const States = {
 LOADING: 1,
 FETCHED: 2,
 FAILED: 3
}
class DataFetch extends Component {
  getInitialState(){
    return {status: States.LOADING, data: null, err: null }
  }
  componentWillMount(){
     this.props.dataPromise.then(data => {
       this.setState({data, status: States.FETCHED})
     }).catch(err => {
       this.setState({err, status: States.FAILED})
     })
  }
  render(){
    const {renderer, failureMessage} = this.props
    const {status, data, err} = this.state
    switch(status){
      case States.LOADING:
        return (<img src="spinner.gif"/>)
      case States.FAILED:
        return (<p className="text-error">{failureMessage}: {err}</p>)
      case States.FETCHED:
        return (<div>{renderer(data)}</div>)
    }
  }
}

const dataPromise = Promise.resolve("Hello World")
const showData = data => (<p>{data}</p>)
ReactDOM.render(
   <DataFetch dataPromise={dataPromise} renderer={showData} failureMessage="Sorry couldn't fetch message"/>, 
   document.body
)