Adding JSON data to React

Until your server request returns restaurant it will be set as the default [] that you have set.

An empty array does not have a property of status, so hence the error.

if you change your default to null:

const [state, dispatch] = useReducer(reducer, {
    restaurant: null,
    loading: true,
  });

And then check for a value:

function SingleRestaurant({ match }) {
  const { restaurant } = useFetchSingleRestaurant({ id: match.params.id });
  if (!restaurant) return 'Loading'

  return ( 
    <p>{restaurant.status.delivery}</p>
  ) 
}

You could also pass back the loading state from your hook and then do a check on that.