CODEWITHSUNDEEP
javascriptreactjsreact-nativejsx
Vianney Bailleux
Vianney Bailleux

Reputation: 423

function map in jsx react native

in my program write in react native i have this snippet:

getCompanyFunction() {
  const { enterprises, navigation } = this.props;
  return (
    <ScrollView horizontal>
      <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
        { enterprises.map((enterprise) => {
          return (
            <Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
              <ListItem
                title={enterprise.name}
                subtitle={(
                  <View>
                    <Text style={{ color: theme.text.default }}>
                      {enterprise.fonction}
                    </Text>
                    <Text style={{ color: theme.palette.text.default }}>
                      {enterprise.location || ''}
                    </Text>
                  </View>
                )}
                onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
              />
            </Card>
          );
        })}
      </View>
    </ScrollView>
  );
}

for my example i have three enterprise but only the first is apparent in the result. However the map function should iterate my array?

thank!

Upvotes: 0

Views: 432

Answers (1)

Bruno Eduardo
Bruno Eduardo

Reputation: 1393

The map function returns a new array with the results of its operation.

MDN docs:

The map() method creates a new array with the results of calling a provided function on every element in the calling array.

You could use a FlatList component to render the resulting array from your map function.

Here's an example on how you could do it (assuming you don't need to alter enterprises data):

renderCard = (enterprise) => {
    return (
        <Card key={enterprise.id} containerStyle={{ width: Dimensions.get('window').width - 50 }}>
            <ListItem
                title={enterprise.name}
                subtitle={(
                    <View>
                        <Text style={{ color: theme.text.default }}>
                            {enterprise.fonction}
                        </Text>
                        <Text style={{ color: theme.palette.text.default }}>
                            {enterprise.location || ''}
                        </Text>
                    </View>
                )}
                onPress={enterprise.id && (() => handleItemPress(enterprise.id, navigation))}
            />
        </Card>
    );
}

getCompanyFunction() 
  const { enterprises, navigation } = this.props;
  return (
    <ScrollView horizontal>
      <View style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap' }}>
        <FlatList
        data={enterprises}
        renderItem={({ item }) => renderCard(item)} />
      </View>
    </ScrollView>
  );
}

You don't necessarily need to use a component to render a list of components, but it's usually the best course of action to do so.

Upvotes: 1

Related Questions