can i reuse a single instance of a component at multiple places on a screen in react?

user_1050008 0
Viewed 1378

I have this application that i am writing in react-native, where i have this screen which displays around 50-100 images and some action buttons associated with them, including a pop-up menu(one associated with each of them). Is there a way that i can use same pop-up menu(same instance) for all images?

             <View>
             // react-native-paper Card Component
               <Card style={styles.card}>
                <Card.Content style={styles.cardContent}>
                  <Card.Cover
                    style={{ height: 60, width: 60 }}
                    source={
                      item.avatar ||
                      (item.gender === 'male'
                        ? require('../../assets/male.jpeg')
                        : require('../../assets/female.jpeg'))
                    }
                  />
                  <Caption style={styles.title}>{item.name}</Caption>
                </Card.Content>
                <Card.Actions>
                  <Avatar.Text
                    style={{ backgroundColor: 'skyblue' }}
                    size={24}
                    label={`#${item.id}`}
                  />
                 // react-native-paper Menu Component
                 // can i somehow use a single component for all cards?
                  <Menu
                    visible={this.state.visible}
                    onDismiss={this._closeMenu}
                    anchor={
                      <IconButton
                        icon="menu"
                        theme={theme}
                        size={20}
                        onPress={() => console.log('Pressed')}
                      />
                    }
                  >
                    <Menu.Item onPress={() => {}} title="Item 1" />
                    <Menu.Item onPress={() => {}} title="Item 2" />
                    <Divider />
                    <Menu.Item onPress={() => {}} title="Item 3" />
                  </Menu>
                </Card.Actions>
              </Card>
                  .
                  .
          //same card multiple times
                  .
                  .
             </View>
react-native-paper react-native reactjs frontend mobile
1 Answers

You can extract the Menu component into your own custom component and then reuse it in your cards. This means you only need to define your Menu once and then use that one component multiple times (which will create a separate instance of the Menu for each card, acting independently of each other).

You can also do the same for your Card component which means you don't have to define the same thing multiple times. Will make your code much cleaner and more useable (your methods you define in your components will only execute for that instance of the component, not on a global level as your above code will - e.g. this._closeMenu will only execute for the Menu instance that it's defined in)

Take a look here for how to go about extracting and reusing your components - https://caster.io/lessons/react-native-extracting-and-writing-react-native-components

user_47626150
Related