i am trying to render the nested list in react-native
with express
,
Initially i am updating the state with first level list, by using onPress
event I am trying to update the state by nesting the that particular subList
object into the appropirate list object
.
here is my code
<TouchableWithoutFeedback
onPress={ async () => {
fetch(`http://192.168.64.1:3000/getTypes/${item.id}`, {
method: 'GET',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
}
})
.then((response) => response.json())
.then((data) => {
let changedState = [...retrivedData]
changedState.map((dataItem) => {
if(dataItem.id == item.id){
dataItem.checked = !dataItem.checked
dataItem.subCategory = data
}
})
setRetrivedData(changedState);
console.warn(retrivedData);
})
}} >
<View key={item.id}>
<View style={styles.menus} key={item.id}>
<Text style={[{ fontWeight: 'normal', color: 'black' }, styles.menuTitle]}>{item.name}</Text>
<Icon style={styles.icon} name={item.checked ? 'chevron-small-up' : 'chevron-small-down' } type='entypo' />
</View>
{item.checked &&
retrivedData.map((category) => {
if(category.categoriesId == item.id){
if(category.subCategory.length > 0)
{
category.subCategory.map((subItem) => {
return(
<View style={styles.subMenus}>
<Text style={styles.subMenu}>{subItem.name}</Text>
</View>
)
})
}
}
})
}
</View>
</TouchableWithoutFeedback>
Here is my state before update
[
{"checked": true,
"id": 1,
"name": "clothing",
"productCategoryId": 1,
},
{
"checked": false,
"id": 2,
"name": "footwear",
"productCategoryId": 1
},
...
]
Here is my code after update
[
{"checked": true,
"id": 1,
"name": "clothing",
"productCategoryId": 1,
"subCategory": [
[Object],
[Object],
[Object],
[Object],
[Object],
[Object]
]
},
{
"checked": false,
"id": 2,
"name": "footwear",
"productCategoryId": 1
},
...
]
I was using nested map method so it sets the state before the map method completes its process....
I have sorted out that by fetching all the while mounting .. Thanks,