NativeBase unable to list only some part of array - reactjs

Question

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>
)
}
}
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

Answer 1

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>
);

Answer 2

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>
)
});