Reputation: 3444
So my code is:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
myArray: [
{id:1, continent:[
{id:1, name: 'Russia'},
{id:2, name: 'Germany'},
{id:3, name: 'Poland'}
]},
{id:2, continent:[
{id:1, name: 'China'},
{id:2, name: 'India'},
{id:3, name: 'Bangladesh'}
]},
{id:3, continent:[
{id:1, name: 'Brazil'},
{id:2, name: 'Peru'},
{id:3, name: 'Chile'}
]}
],
otherValue: 23
}
}
subBoardList(id){
return this.state.myArray[id].map((continent) => {
return(
<View>
<Text>{continent.name}</Text>
</View>
)
})
}
render() {
return (
{this.subBoardList(2)}
);
}
}
I want to display the content of the continent array of which id is passed to the subBoardList
function. How do I do that?
Error:
TypeError: undefined is not an object (evaluating 'this.state.myArray[id].map')
Upvotes: 0
Views: 100
Reputation: 3991
If you want to search by id and id is not behave as an index, for example, id can be any number(10,11,12 or 120,155,254...), your subBoardList
should be like this
subBoardList(id) {
return this.state.myArray.map(item => {
if (item.id === id) {
return item.continent.map(c => { return <li> {c.name} </li>; });
}
else return null;
});
}
Upvotes: 0
Reputation:
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
myArray: [
{id:1, continent:[
{id:1, name: 'Russia'},
{id:2, name: 'Germany'},
{id:3, name: 'Poland'}
]},
{id:2, continent:[
{id:1, name: 'China'},
{id:2, name: 'India'},
{id:3, name: 'Bangladesh'}
]},
{id:3, continent:[
{id:1, name: 'Brazil'},
{id:2, name: 'Peru'},
{id:3, name: 'Chile'}
]}
],
otherValue: 23
}
}
subBoardList(id){
return this.state.myArray[id].continent.map((continent) => {
// You need to add continent key after myArray since
// index 2 = {id:3, continent:[
// {id:1, name: 'Brazil'},
// {id:2, name: 'Peru'},
// {id:3, name: 'Chile'}
//]}
return(
<View>
<Text>{continent.name}</Text>
</View>
)
})
}
render() {
return (
<div> {this.subBoardList(2)} </div>
// Add a div after return it's import to render anything
);
}
}
Try like this.
Upvotes: 0