Click here to Skip to main content
13,765,673 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
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
Posted 10-Aug-18 9:40am
Updated 13-Aug-18 8:41am

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

As it turns out the call to odata was just fine, it was the syntax of the listitems that was wrong
{ data && { function(data) ( // PAREN HERE
    <ListItem title="data" rightTitle={data} /> ) // AND HERE
} }
Switched the braces out and put in parens instead.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web01-2016 | 2.8.181114.1 | Last Updated 13 Aug 2018
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100