Click here to Skip to main content
13,739,612 members
Rate this:
 
Please Sign up or sign in to vote.
See more:
I learning react-native. I'm trying to display a really simple list of products from a database call. The data is loading but for some reason the individual items are not being loaded into the list.

What I have tried:

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

const CONST_REST_WS_HOST = "[PRIVATE DOMAIN]";
const CONST_REST_WS_URL = "http:" + "//" + CONST_REST_WS_HOST + "/odata/";

var o = require('odata');

class Feed extends Component {
   oProductHandler = null;

   constructor(props) {
      super(props);
      this.state = { products: [] };
   }

   componentWillMount() {
      this.oProductHandler = o(CONST_REST_WS_URL + 'Products');
      this.oProductHandler.get(function (data) {
         this.setState( {products: data} );
      }.bind(this));
   }

   render() {
      return (
         <ScrollView>
            <List>
            {
               this.state 
                 && this.state.products 
                 && this.state.products.map((item) => {
                  console.log(item.ItemCode); // THIS APPEARS IN THE LOG
                  <ListItem
                     key={item.ProductId}
                     title={item.ItemCode}
                  />
               })
            }
            </List>
         </ScrollView>
      );
   }
}

export default Feed;

The o = require('odata'); is from npm odata.
The odata service works. I wrote it myself, I've used it in other projects, and I can get data in the browser.
I can see the ItemCode in the log so I know the data is getting in but for some reason the <ListItem ... /> items are not being added to the list. I can see the <List ../> itself and it appears to have a single blank item.
When something runs like this as a result of a database call, are the items being created in a different context? What's the reason for the <ListItem /> not to find the <List .../>?

TIA, Mike
Posted 12-Aug-18 15:41pm
Updated 13-Aug-18 7:38am

1 solution

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

Solution 1

So it turns out that it was just a problem of using braces {} where I should have used parens ()

render() {
   return (
      <ScrollView>
         <List>
         {
            this.state
              && this.state.products
              && this.state.products.map((item) => ( // THIS PAREN INSTEAD OF BRACE
               <ListItem
                  key={item.ProductId}
                  title={item.ItemCode}
               />) // SAME HERE
              )
         }
         </List>
      </ScrollView>
   );
  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.180920.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