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",
}
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