[SOLVED] React native Flatlist with modal handling for each item

Issue

This Content is from Stack Overflow. Question asked by Rahul Kumar

… i have some data in json format which i want to render in Flatlist
For every item there is button pending .When user click on pending button a Modal is open with two button accept and reject.


I want when I click on reject button modal close and when click on accept button then pending button convert in accepted

… See in image
[![enter image description here][1]][1]


I try many times
But i was unable to change every item button in accepted

… It change only one item button not every button as accepted

… Here is my code

…this is render function

     ... <Modal
        transparent={true}
        visible={!active}
        onRequestClose={() => {
         console.warn("closed");
        }}>
        <View style={styles.containerModal}>
         
   
           <View style={{height:48, width:"40%"}}>
            <Pressable style={styles.nextbtn} onPress={() => setAccept(accept)}>
              <Text style={styles.nextbtntext}>Accept</Text>
            </Pressable>
          </View>

          <View style={{height:48, width:"40%"}}>
            <Pressable style={styles.rejectbtn} onPress={()=>{setactive(!active)}}>
              <Text style={styles.nextbtntext}>Reject</Text>
            </Pressable>
          </View>
           
      </Modal>

     ... <TouchableOpacity  onPress={()=>{setactive(!active)}}>
        { accept ?
        (
          <View style={styles.pendingBtn}>
          <Image source={require('../../../assets/pending.png')} style={{height:24,width:16}}/>
           <Text>Pending</Text>
          </View>
          )
          :
          (
            <View style={styles.aceptBtn}>
            <Image source={require('../../../assets/Ok.png')} style={{height:24,width:16}}/>
              <Text>Accepted</Text>
            </View>
            )}
          </TouchableOpacity>

      </View>
      </View>
    )
  }```
    ...This  isF`enter code 
     here`latlist

    ```<FlatList
          data={BookingData}
          renderItem={Booked}
          keyExtractor={item => item.id}
        />

  
     
  )
} ```



  



Solution

It’s not exactly clear from your code but are you updating the bookingData accordingly when you click on Accept?


This Question was asked in StackOverflow by Rahul Kumar and Answered by Mahesh It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?