CODEWITHSUNDEEP
reactjsreact-nativenative-base
Somename
Somename

Reputation: 3434

NativeBase unable to list only some part of array

So my data is: 

[
  {"id_categories":1,"name":"One"},
  {"id_categories":2,"name":"Two"},
  {"id_categories":3,"name":"Three"}
]

And my class to display the list is : 

import React, { Component } from 'react';
import { Text } from 'react-native';
import { Container, Content, Card, CardItem, Body, Left, 
         Right, List, ListItem, } from 'native-base';

export default class ListData extends Component {
    render(){

        let articles = this.props.data.map(function(items, index){
            return(
            <List dataArray={items}
                renderRow={(item) =>
                  <ListItem>
                    <Text>{item}</Text>   // this displays the id also
                    <Text>{item.name}</Text>   // this does not display anything
                    //Only using one of the two <Text> above at a time
                  </ListItem>
                }>
            </List>
          )
        });

        return(
        <Content>
            {articles}
        </Content>      

        )
    }
}

enter image description here

I want to be able to show only the name in the list and make it TouchableOpacity and pass the value of the id_categories clicked to another screen. But I'm not able to show the only the name

Upvotes: 1

Views: 2146

Answers (2)

Ganesh Cauda
Ganesh Cauda

Reputation: 1016

enter image description here

You don't need to map your array if you use native base list dataArray contains your array data and renderrow contains a component or custom component.

return (
    <List dataArray={this.props.data}
      renderRow={(item) =>
        <ListItem>
          <Text>{item.name}</Text>  
        </ListItem>
      }>
    </List>
);

Upvotes: 2

An Nguyen
An Nguyen

Reputation: 1478

Your item inside map function is already the one you want to process: {"id_categories":1,"name":"One"}.

So inside the map loop you can access name by item.name as follow:

let articles = this.props.data.map(function(item, index) {
  // item ={"id_categories":1,"name":"One"},
  return(
    <List dataArray={"I will skip this one"}
      renderRow={(item) =>
        <ListItem>
          <Text>{item.name}</Text>
        </ListItem>
      }>
    </List>
  )
});

EDIT

Just have a look at NativeBase List, and I think this should fit your requirements

let articles = (
    <List dataArray={this.props.data}
        renderRow={(item) => <ListItem><Text>{item.name}</Text></ListItem>}>
    </List>
  )
});

Upvotes: 1

Related Questions