Search code examples
reactjsreact-nativefetchnested-listsuse-state

React native not updates the UI after useState()


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
 },
 ...
]

Solution

  • 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,