How do I handle results from react-odata?

I'm working on a react-native prototype and trying to introduce react-odata.
https://www.npmjs.com/package/react-odata has the following sample code in the readme file:

const baseUrl = 'http://services.odata.org/V4/TripPinService/People';
const query = { filter: { FirstName: 'Russell' } };
 
<OData baseUrl={baseUrl} query={query}>
  { ({ loading, error, data }) => (
    <div>
      { loading && {/* handle loading here */} }
      { error && {/* handle error here */} }
      { data && {/* handle data here */}}
    </div>
  )}
</OData>

What I'm looking for is what to put in the spaces /* handle xxx here */. I realize it's destructuring the object with a lambda (arrow) function, but I'm having trouble constructing a response to each of the three options.

What I have tried:

import React, { Component } from 'react';
import {
    Text,
    View,
    ScrollView
} from 'react-native';
import { List, ListItem } from 'react-native-elements';

import OData from 'react-odata';
const baseUrl = 'http://HIDDEN_URL.elasticbeanstalk.com/odata/Products';
const query = false;
// checked query param down inside odata.js, use 'false' for no filter
// also tried { filter: { ProductId: 1 } };
// also tried { filter: { ProductId: '1' } };

render() {
  return (
    <ScrollView>
      <OData baseUrl={baseUrl} query={query}>
          { ({ loading, error, data }) => (
            <View style={{ height: 400 }}>
              <Text>HI THERE!!</Text> <==I can see this in the view
              { loading && {function() { 
                <Text>Loading...</Text>}
              } }
              { error && {function() { 
                <Text>error...</Text>}
              } }
              { data && { function(data) {
                 <ListItem title="data" rightTitle={data} /> }
              } }
            </View>
          )}
       </OData>

I haven't gone through the step of tracing the network traffic to see the call go out and return yet (I'm on an Android device). I've checked the URL and it's valid (I've been using it for quite a while in other projects). I've also checked the URL via chrome on the device and it's working.
The part that's not clear to me is how to structure each of the responses to 'loading', 'error', and 'data'. I tried what you see here with the function(data) {//function body}, I also tried anonymous functions such as () => ({//function body}), I tried function(data) and (data) by itself.
I tried putting the <view> in different places, inside the 'data' function, outside the <odata>. It either creates a syntax error or I just get an empty view.

Anyone out there ever use the react-odata library or something else with a similar structure and know the correct way to deal with these?

TIA, Mike

Tags: OData, React