Modal not updating to new item in array,firebase/react native state-CodePudding

my current issue with my react native app is that when a user wants to open a lesson (from the lessons array with each object being a lesson with a title,description,img url etc)to make it bigger through a modal, its state does not update. What i Mean by this is that the books title,description,and other attributes won't change if you press on a new lesson. What would be the solution to this?

export default function Learn() {
      const [modalVisible, setModalVisible] = useState(false);
      const [lessons,setLessons] = useState()
      useEffect(() => {
        async function data() {
          try {
            let todos = []
            const querySnapshot = await getDocs(collection(db, "lessons"));
          querySnapshot.forEach((doc) => {
            todos.push(doc.data())
          });
          setLessons(todos)
          console.log(lessons)
          }
          catch(E) {
            alert(E)
          }
        }
    
        data()
        
      }, [])
      
      return (
        <View style={learnStyle.maincont}>
          <View>
              <Text style={{fontSize:28,marginTop:20}}>Courses</Text>
             <ScrollView style={{paddingBottom:200}}>
              {lessons && lessons.map((doc,key) => 
              <>
             <Modal
    animationType="slide"
    transparent={true}
    visible={modalVisible}
    onRequestClose={() => {
      Alert.alert("Modal has been closed.");
      setModalVisible(!modalVisible);
    }}
  >
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <Image source={{
          uri:doc.imgURL
        }} style={{width:"100%",height:300}}/>
        <Text style={{fontWeight:"700",fontSize:25}}>{doc.title}</Text>
        <Text style={{fontWeight:"700",fontSize:16}}>{doc.desc}</Text>
        <Pressable
          style={[styles.button, styles.buttonClose]}
          onPress={() => setModalVisible(!modalVisible)}
        >
          <Text style={styles.textStyle}>Hide Modal</Text>
        </Pressable>
      </View>
    </View>
  </Modal>
          <LessonCard setModalVisible={setModalVisible} title={doc.title} desc={doc.desc} img1={doc.imgURL} modalVisible={modalVisible}/>
              </>
              )}
             <View style={{height:600,width:"100%"}}></View>
             </ScrollView>
              </View>
        </View>
      )
    }

What it looks like:

**image 1 is before you press the modal and the 2nd one is after **the main issue though is that if you press cancel and press on another lesson the modal that opens has the the same state(title,imgurl,anddesc) as the first lesson and does not change.

CodePudding user response：

The problem is that you create a lot of modal windows through the map function, I suggest making one window and passing the key as a parameter and using it to search for a specific array of data that is shown to the user (photo, title, etc.)

CodePudding user response：

The problem is that all 3 Modals are controlled by the one state variable. So when the code sets modalVisible to true, all 3 modals are being opened at once.

You can fix this in a few ways, but a simple way would be to move the Modal and its state into the LessonCard component. This way each modal will have its own state that's only opened by its card. So the loop in Learn will just be:

 {lessons && lessons.map((doc,key) => (
     <LessonCard lesson={doc} key={key} />
 )}