'how can i manage multiple dropdown menu with single usestate in react native

i can't use multiple states because the list of folder can have one or more folders. for each folder i want to display a signle dropdown using sigle useState. this is the dropdown menu that i am used with this state const [visible, setVisible] = React.useState(false);

      <View style={styles.MenuContainer}>
        <Menu
          visible={visible}
          anchor={
            <TouchableOpacity
              style={{
                width: "8%",
                justifyContent: "center",
              }}
              activeOpacity={0.7}
              onPress={() => setVisible(true)}
            >
              <Image
                source={modules.more.path}
                style={{ height: 25, width: 25 }}
              />
            </TouchableOpacity>
          }
          onRequestClose={ () => setVisible(false)}
        >

          <MenuItem onPress={Rename}>Renommer</MenuItem>
          <MenuDivider />
          <MenuItem onPress={Delete}>Supprimer</MenuItem>
          <MenuDivider />
          <MenuItem onPress={Share}>partager</MenuItem>
        </Menu>
      </View>

then i rendered a single folder in this component:

<Folders
  name={item.name}
  dateCreationT={item.dateCreation}
  onPress={() => navigation.navigate("ListForms", { item })}
/>

then i rendered the list of folders in this component:

<>
  <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
  />
</> 


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source