How do I get to a nested array in React Native?-CodePudding

I'm trying to get to the nested array and more specifically to the "dishes" array through the map () method, but to no avail.

    const RESTAURANTS = [
    {
        id: "1",
        name: "Filada Family bar",
        type: "Bakery",
        rating: "5.0",
        favorite: true,
        hotOffer: true,
        hotOfferPromo: require("../images/offers/offer_1.png"),
        dishes: [
            {
                id: "1",
                name: "Filada Family bar",
                category: "cake",
                type: "Asian food",
                rating: "5.0",
                distance: "0.2 km - $$ -",
                image: require("../images/restaurants/restaurant_1.jpg"),
            },
        ],
    },
];

I usually only use the following code for the first array, but I need the data from the "dishes" array.

{RESTAURANTS.map((item) => (
    <View key={item.id}>
        <Text>{item.name}</Text>
    </View>
))}

CodePudding user response：

that is just plain javascript. You can either loop restaurants and get dishes or access a restaurant by the index in the array and get the result (or maybe search, filter whatever you need.)

access and index and the dishes property on the object:

{RESTAURANTS[0].dishes.map((item) => (
    <View key={item.id}>
        <Text>{item.name}</Text>
    </View>
))}

Looping restaurants:

{RESTAURANTS.map((restaurant) => {
   return restaurant.dishes.map((dish) => (
      <View key={dish.id}>
          <Text>{dish.name}</Text>
      </View>
   ))
})}

What you need to understand here is that you have an array of objects. When mapping, the item variable means one of these objects that are being looped through and you can access any property like you would in a regular object.