React Fetch Higher Order Component Example

fetchHOC.js

const fetchHOC = (WrappedComponent, fetchPath, optionalHeader) => {
    return class extends Component {
      constructor(props){
        super(props)
        this.state = {
          data: null,
          isError: false,
          isFetching: true
        }
      }
  
      async componentWillMount(){
        const header = optionalHeader?optionalHeader:null
        await fetch(fetchPath, header)
          .then(response => response.json())
          .then(data => this.setState({data: data}))
          .catch((err) => this.setState({isError: err}))
      }
  
      render() {
        return <WrappedComponent 
                  data={this.state.data} 
                  isError={this.state.isError} 
                  isFetching={this.state.isFetching}
                  {...this.props} />
      }
    }
  }

Since you are using async/await, you don't need to handle promises .then() anymore. I think the code below should work, too :)

try {
  const data = await(await fetch(fetchPath, header)).json()
  this.setState({data: data, isFetching: false})
} catch(err){
  this.setState({isError: err, isFetching: false})
}