I'm currently displaying an array into a SectionList in React Native, I'm trying to update in real-time the value selected, this is the array:
Array [
Object {
"data": Array [
Object {
"id": 1.01,
"price": 1,
"selected": false,
"title": "Ranch",
"type": "Sides",
},
Object {
"id": 1.02,
"price": 1,
"selected": false,
"title": "Blue Cheese",
"type": "Sides",
},
],
"required": false,
"type": "Sides",
},
Object {
"data": Array [
Object {
"id": 2.01,
"price": 1,
"selected": false,
"title": "Hot Sauce",
"type": "Sauces",
},
Object {
"id": 2.02,
"price": 1,
"selected": false,
"title": "Medium Sauce",
"type": "Sauces",
},
],
"required": true,
"type": "Sauces",
},
]
this is the function I'm using to update the array:
const pressOptional = (e) => {
additional.map((item) => {
if (item.type == e.type) {
item.data.map((a => {
if (a.id == e.id) {
a.selected = !e.selected
}
}))
}
})
}
I'm calling this function in a button displayed in the SectionList, and when I call it, I see it changing the value, but the SectionList still reads the previous data
You forgot to return the mapped value.
const pressOptional = (e) => {
return additional.map((item) => {
if (item.type == e.type) {
item.data.map((a => {
if (a.id == e.id) {
a.selected = !e.selected
}
}))
}
})
}