I'm trying to display a nested array in my screen (see array below), the first layer display correctly, but when I try to display the second one, it doesn't return anything, the items in the second layer array should be displayed only if selected=false, that's why I decided to use a forEach function first.

map

   const items = order.order.map((item) => {
    
          const additional = item.additional.forEach((e) => {
                e.data.map((a) => {
                    const id = Math.random() * Math.random()   a.id
                    if(a.selected == false){
                      return(
                        <View key={id}>
                          <Text>{a.title}</Text>
                          <Text>$ {a.price}</Text>
                        </View>
                      )
                    }
                  })
              })
    
          return (
            <View key={item.id}>
               <Text>{item.quantity}</Text>
               <Text>{item.title}</Text>
               <Text>$ {item.price.toFixed(2)}</Text>
              {additional}
            </View>
          )
        })

array ITEM

Object {
  "additional": Array [
    Object {
      "data": Array [
        Object {
          "id": 0,
          "price": 0,
          "selected": false,
          "title": "Hot Sauce",
          "type": "Sauces",
        },
        Object {
          "id": 1,
          "price": 0,
          "selected": false,
          "title": "Medium Sauce",
          "type": "Sauces",
        },
      ],
      "id": 1,
      "required": true,
      "title": "Sauces",
    },
    Object {
      "data": Array [
        Object {
          "id": 0,
          "price": 1,
          "selected": false,
          "title": "Ranch",
          "type": "Sides",
        },
        Object {
          "id": 1,
          "price": 1,
          "selected": false,
          "title": "Blue Cheese",
          "type": "Sides",
        },
      ],
      "id": 0,
      "required": false,
      "title": "Sides",
    },
  ],
  "id": 0.103,
  "price": 6.95,
  "quantity": 1,
  "title": "Buffalo Wings",
}

CodePudding user response：

import "./styles.css";

const data = {
  additional: [
    {
      data: [
        {
          id: 0,
          price: 0,
          selected: false,
          title: "Hot Sauce",
          type: "Sauces"
        },
        {
          id: 1,
          price: 0,
          selected: true,
          title: "Medium Sauce",
          type: "Sauces"
        }
      ],
      id: 1,
      required: true,
      title: "Sauces"
    },
    {
      data: [
        {
          id: 0,
          price: 1,
          selected: true,
          title: "Ranch",
          type: "Sides"
        },
        {
          id: 1,
          price: 1,
          selected: false,
          title: "Blue Cheese",
          type: "Sides"
        }
      ],
      id: 0,
      required: false,
      title: "Sides"
    }
  ],
  id: 0.103,
  price: 6.95,
  quantity: 1,
  title: "Buffalo Wings"
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <div className="content" key={data.id}>
        <div>Title: {data.title}</div>

        <div>Price: {data.price.toFixed(2)}</div>

        <div>Qty: {data.quantity}</div>

        <br />

        <div>Additional:</div>
        {data.additional.map((item, index) => {
          return (
            <div key={item.id}>
              {item.title}:
              <ul>
                {item.data
                  .filter((data) => !data.selected)
                  .map((data, dataIndex) => {
                    return (
                      <li key={data.id}>
                        <div>
                          {data.title} - {data.type}
                        </div>
                      </li>
                    );
                  })}
              </ul>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Ass mentioned above, forEach didn't return anything. So you can combine filter and map. Here is the working sandbox https://codesandbox.io/s/competent-leavitt-b2e2ec?file=/src/App.js