VisualizingState: State !== Data

StateNotData.jsx

type States = {
 mode: 'loading' | 'loaded' | 'error',
 data: any,
}

class DataLoader extends React.Component<{}, States> {
 state = {
   mode: 'loading', // state
   data: {}, // data
 }
 componentDidMount() {
   this.props.load()
     .then(({ data, error }) => {
       if (!error) {
         this.setState({ mode: 'loaded', data })
       } else {
         this.setState({ mode: 'error', data: error })
       }
     })
 }
 render() {
   const { mode, data } = this.state
   switch(mode) {
     case 'loading':
       return <Loading />
     case 'loaded':
       return <Loaded data={data} />
     default:
       return <Error data={data} />
     }
   }
}