React router data fetching demo

data-fetching-demo.js

import React from 'react'
import { useRouteMatch } from 'react-router-dom'
import { statusTypes } from '@youversion/react' // Helper object for status enums 'pending', 'idle', 'resolved', 'rejected'
import { getThing } from './api-methods'

function MyComponent() {
  const { path } = useRouteMatch()

  const [loadingStatus, setLoadingStatus] = React.useState(statusTypes.PENDING)
  const [data, setData] = React.useState()
  
  React.useEffect(() => {
    async function loadData() {
      setLoadingStatus(statusTypes.PENDING)
      try {
        const response = await getThing() // Use whatever your data function is.
        setData(response)
        setLoadingStatus(statusTypes.RESOLVED)
      } catch (error) {
        setLoadingStatus(statusTypes.REJECTED)
      }
    }
    
    loadData()
  }, [path]) // Effect will run on initial load, and when `path` changes.
  
  if (loadingStatus === statusTypes.PENDING) {
    return <LoadingSpinnerThing />
  }
    
  if (loadingStatus === statusTypes.REJECTED) {
    return <SomeErrorThing />
  }
    
  return (
    <>
    { data.length ? data.map(/* do stuff here */) : 'no data' }
    </>
  )
}