Map 嵌套数组在 React Native 中渲染

Question

I have a nested array object in my project. Here's the array i have:

 const listItem = [ {name:'Patrick star',id:"1",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Gallileo',id:"2",costs:[{name:'Read Book'},{name:'Drink water'},,{name:'Walking'}]}, {name:'Einsten',id:"3",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Peterson',id:"4",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Schwarzenneger',id:"5",costs:[{name:'Read Book'},{name:'Drink water'}]}, {name:'Dostoyevsky',id:"6",costs:[{name:'Read Book'},{name:'Drink water'}]} ]

Now, i am rendering this in my project. The names are showing fine but i can't add the costs by maping. Here's what i have reached to:

 <FlatList style={{marginTop:10}} data={listItem} renderItem={({item})=>( <View style={{justifyContent:'center',marginBottom:10}}> <Text>{item.name}</Text> {listItem.map((u,i) => { return ( <Text>{u.costs[i].name}</Text> //this line throws error ) }) } </View> )} />

I might have done something wrong with the mapping.

Answer 1

You have to map your costs instead of listItem:

<FlatList
    style={{marginTop:10}}
    data={listItem}
    renderItem={({item})=>(
    <View style={{justifyContent:'center',marginBottom:10}}>
      <Text>{item.name}</Text>
        {item.costs.map(cost => {
            return (
                <Text>{cost.name}</Text>
            )
        })
        }
    </View>
    )}
 />