using odata in react-native

Question

I'm trying to use an odata library in a little react-native test app but the list doesn't fill when the data returns.

const CONST_REST_WS_HOST = "DELETED";
const CONST_REST_WS_URL = "http:" + "//" + CONST_REST_WS_HOST + "/odata/";

var o = require('odata');

class Feed extends Component {

  [EDIT - Added in setup of initial state
  constructor(props) {
    super(props);
    this.state = { products: null };
  }

  [EDIT - Added in part loading the data]
  componentWillMount() {
    this.oProductHandler = o(CONST_REST_WS_URL + 'Products');
    this.oProductHandler.take(20).get(function (data) {
      this.setState({ products: data });
    }.bind(this));
  }

  render() {
    return (
      <ScrollView>
        <List>
          <ListItem key="1" title="Sample Item" /> // THIS APPEARS IN LIST
          {
            this.state && this.state.products && this.state.products.map((item) => {
              console.log(item.ItemCode); // THIS STUFF APPEARS
              <ListItem
                key={item.ProductId}   // I DON'T SEE THESE THINGS
                title={item.ItemCode}
              />
            })
          }
        </List>
      </ScrollView>
    );
  }
}

EDIT - added in parts of package.json

"odata": "^0.4.0",
"odata-query": "5.0.0",
"react": "16.3.1",
"react-dom": "16.3.0",
"react-native": "0.55.4",
"react-native-elements": "^0.18.5",

In the view I see the List and I see the first list item "Sample Item". I also see the items in the console. The data service is working, I built it myself and it's working in other projects. It's working in this project as well since I can see the item codes in the console. So with the item.ItemCode showing up in the console, why don't they show up in the list? Does the reaction to the state change run in a different context? I've been looking around for a couple of days and they all appear to follow this pattern.. fill in the data, setState, render gets re-run and component gets filled. All that seems to be working or the log would be empty. So what gives here? EDIT added more code and these details I added in more items requested in comments and the package info just in case versions are playing a part. This code is now the whole class, that's all there is to it. I've also tried putting the ScrollView and the List inside a conditional if (this.state && this.state.products) { so that the list and the list items are in the same

Mike

Answer 1

I think you just need to add return in the map closure :

{
        this.state && this.state.products && this.state.products.map((item) => {
          console.log(item.ItemCode); // THIS STUFF APPEARS
          return (<ListItem
            key={item.ProductId}   // I DON'T SEE THESE THINGS
            title={item.ItemCode}
          />);
        })
}