React native 3 dots menu for each Card item

I’m trying to add a 3 dots menu for each item on my screen. I have added the menu but when I click one of the menus, all of them are opened.

Here is my screen;

<ScrollView style={styles.screen}>
    <Title style={styles.pageHeader}>
      Lütfen Adres Seçiniz
    </Title>
    <Button style={styles.addButton} icon="plus" mode="contained" onPress={() => {navigation.navigate("Yeni Adres", {
        })}}>
      Yeni Adres Ekle
    </Button>
      
      <View>

      {address_data.map((address) => (
        <TouchableOpacity onPress={() => {navigation.navigate("Ürünler", {
          "address_id": address
        })}}>
        <View>
        <CardPrivate key={address.id}>

          <Card.Title
          title={address.name}
          subtitle={address.town}
          left={(props) => <Avatar.Icon {...props} icon="home" />}
          
          
          right={(props) => 
            <Menu
                visible={visible}
                onDismiss={closeMenu}
                anchor={ <IconButton {...props} icon="dots-vertical" onPress={openMenu}></IconButton>}>
                <Menu.Item onPress={() => {}} title="Düzenle" />
                <Divider style={{height:1,color:"black",width:"100%"}} />
                <Menu.Item onPress={() => {}} title="Sil" />
            </Menu>}
          />
          <Divider style={{height:2,color:"black",width:"100%"}} />
          <View style={styles.textWrapper}>
          
          <Text>{address.neighborhood}</Text>
          <Text>{address.detail}</Text>
          </View>
        </CardPrivate>
        </View>
        </TouchableOpacity>
      ))}

      </View>
    </ScrollView>

Here is my issues screenshot;

I need to open the exact item’s menu when I click the 3 dots button. How can I fix this?

Thanks.

>Solution :

you are using the same state for each menu I think that’s why every menu is opening and closing simultaneously.
create a wrapper for Menu like following then each menuWrapper will have its own visible state.

export default function MenuWrapper(props) {
  const [visible, setVisible] = useState(false);
  const closeMenu = () => setVisible(false);
  const openMenu = () => setVisible(true);
  return (
    <Menu
      visible={visible}
      onDismiss={closeMenu}
      anchor={
        <IconButton
          {...props}
          icon="dots-vertical"
          onPress={openMenu}
        ></IconButton>
      }
    >
      <Menu.Item onPress={() => {}} title="Düzenle" />
      <Divider style={{ height: 1, color: "black", width: "100%" }} />
      <Menu.Item onPress={() => {}} title="Sil" />
    </Menu>
  );
}

then use MenuWrapper inside your component like following sample code

  {address_data.map((address) => (
  
    <CardPrivate key={address.id}>

      <Card.Title
      title={address.name}
      subtitle={address.town}
      left={(props) => <Avatar.Icon {...props} icon="home" />}

      
      right={(props) => 
        <MenuWrapper {...props} />}
      />
      <Divider style={{height:2,color:"black",width:"100%"}} />
      <View style={styles.textWrapper}>
      
      <Text>{address.neighborhood}</Text>
      <Text>{address.detail}</Text>
      </View>
    </CardPrivate>
  ))}