CODEWITHSUNDEEP
javascriptreactjstypescriptreact-nativerendering
user13101751
user13101751

Reputation:

Render via map instead of for loop

I am currently using this function to render some elements & display results after a graphql query:

 const showUsers = React.useCallback(
    (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
      if (data) {
        for (var i = 0; i < numberOfUsers; i++) {
          const userName = data.users.nodes[i].firstName
            .concat(' ')
            .concat(data.users.nodes[i].lastName);
          return (
            <View style={styles.friends}>
              <View style={styles.item}>
                <Text style={styles.userName}>{userName}</Text>
                <View style={styles.addButtonContainer}>
                  <Button
                    rounded
                    onPress={() => {
                      addFriend(Number(data.users.nodes[i].id));
                      setIsSubmitted(false);
                      setUserData(null);
                    }}>
                    <Icon name="plus" size={moderateScale(20)} color="black" />
                  </Button>
                </View>
              </View>
            </View>
          );
        }
      }
    },
    [createUserRelationMutation, userData, numberOfUsers],
  );

I have read that using a for loop isn't a good idea. Hence, I am trying to switch to a map but I am unable to. I couldn't figure out how to use variables like const userNamewhile using a map.

Currently, I can only test with numberOfUsers = 1so it works fine but in reality, I want all of the item contained in the Viewwhich is styled as friends. For now, there will be a separate <View style={styles.friends}>for each item. However, I want to map all items inside one single <View style={styles.friends}>

Upvotes: 0

Views: 44

Answers (2)

Guruparan Giritharan
Guruparan Giritharan

Reputation: 16364

If you want everything to be contained inside the view styled as friends this is how the code should be.

You should have the map inside the view as JS code and access properties from the item variable.

const showUsers = React.useCallback(
  (data: UsersLazyQueryHookResult, numberOfUsers: Number) => {
    if (data) {
      return (
        <View style={styles.friends}>
          {
            data.users.nodes.map(item => {
              const userName = item.firstName
                .concat(' ')
                .concat(item.lastName);

                return (<View style={styles.item}>
                  <Text style={styles.userName}>{userName}</Text>
                  <View style={styles.addButtonContainer}>
                    <Button
                      rounded
                      onPress={() => {
                        addFriend(Number(item.id));
                        setIsSubmitted(false);
                        setUserData(null);
                      }}>
                      <Icon name="plus" size={moderateScale(20)} color="black" />
                    </Button>
                  </View>
                </View>);
            })

          }
        </View>
      );
    }
  },
  [createUserRelationMutation, userData, numberOfUsers],
);

Upvotes: 0

Rodentman87
Rodentman87

Reputation: 650

Map takes a function as its argument, which means that you can use that same code from the for loop inside of the function passed to the map, like this:

data.users.map((user) => {
          const userName = user.firstName
            .concat(' ')
            .concat(user.lastName);
          return (
            <View style={styles.friends}>
              <View style={styles.item}>
                <Text style={styles.userName}>{userName}</Text>
                <View style={styles.addButtonContainer}>
                  <Button
                    rounded
                    onPress={() => {
                      addFriend(Number(user.id));
                      setIsSubmitted(false);
                      setUserData(null);
                    }}>
                    <Icon name="plus" size={moderateScale(20)} color="black" />
                  </Button>
                </View>
              </View>
            </View>
          );
        }

Just replace all instances of data.users.nodes[i] with user since that's what each object in the array is passed into the function as.

For more info about this, check this part of the React docs.

Upvotes: 1

Related Questions