Same Function is Triggered IN Multiple Components

Question

I'm using react-native-material-menu's popup for showing menu options.

But the issue is, it's not working for multiple scenarios.

I mean when I click on first menu button, the same methods gets triggered and hence the same menu is opened every time.

What should be the better approach for to handle this particular scenario.

Here is the Snack

_menu = null;

 setMenuRef = ref => {
     this._menu = ref;
 };

 hideMenu = () => {
     this._menu.hide();
 };

 showMenu = () => {
     this._menu.show();
 };


{this.state.clientsList.map((item) => {
                    return (
                        <View style={styles.caseItem} >
                            <Card style={styles.card}>
                                <CardItem>
                                    <Body>
                                        <View style={styles.rowTitle}>
                                            <Text style={styles.title}>{item.FullName}</Text>
                                            <Menu
                                                ref={this.setMenuRef}
                                                button={<Icon type="Feather" name="more-vertical" onPress={this.showMenu} style={{ fontSize: 20, color: '#555' }} />}
                                            >
                                                <MenuItem onPress={this.hideMenu}>View</MenuItem>
                                                <MenuItem onPress={this.hideMenu}>Edit</MenuItem>
                                                <MenuItem onPress={this.hideMenu}>Delete </MenuItem>
                                            </Menu>
                                        </View>

                                        <View>
                                            <Text style={styles.lbl}>Email: <Text style={styles.lblValue}>{item.EmailID}</Text></Text>
                                            <Text style={styles.lbl}>Client Type: <Text style={styles.lblValue}>{item.ClientType}</Text></Text>
                                        </View>
                                    </Body>
                                </CardItem>
                            </Card>
                        </View>
                    );
                })}

score 0 · Answer 1 · answered Jan 10 '20 at 07:21

you are using same reference for all menu components

you have to use different ref for every Menu.

Best Approach:

first way to Create HOC for Menu and handle them in it.

Moderate

or Create Dynamic Ref in React for Menu's List

for running code only

3rd is to create ref for every menu

_menu1 = null;
_menu2 = null; 
_menu3 = null;

score 0 · Answer 2 · answered Jan 10 '20 at 07:26

0

You are calling the same ref every-time. I've not used the library you mentioned but if it has to rely on ref you can create a list of reference instead, syntax is in this post.

answered Jan 10 '20 at 07:26

Andus

1,713
13
30

Same Function is Triggered IN Multiple Components

2 Answers2