Click here to Skip to main content
15,886,362 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:

JavaScript
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
Updated 13-Aug-18 7:38am

1 solution

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

JavaScript
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>
   );
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900