Search code examples
reactjsreact-nativeserver-side-renderingsetstateuse-state

React is not updating the view template after updating the state in react-native


I am trying to update the the state by onPress event state has been updated but view is not changing


<View style={styles.dropDownMenu}>
                {
                    dataLoaded ?
                        retrivedData.map((item) => {
                            return (
                                <TouchableWithoutFeedback onPress={() => {
                                    let changedState = retrivedData
                                    changedState.map((dataItem) => {
                                        if(dataItem.id == item.id){
                                            dataItem.checked = !dataItem.checked
                                            console.info('data matched')
                                        }
                                    })
                                    setRetrivedData(changedState,console.log(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={'chevron-small-down'} type='entypo' />
                                            <Text>{item.checked ? 'True' : 'False'}</Text>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                            )
                        }) :
                        <Text>NULL</Text>
                }
            </View>

what I have to change i dont know?


Solution

  • This might help

     <TouchableWithoutFeedback onPress={() => {
           let changedState = [...retrivedData]; // Try this way
            .....
           setRetrivedData(changedState,console.log(retrivedData));
        }} >
           ......
     </TouchableWithoutFeedback>