react native display x number of rows from an array

Question

Supposing you have an array of 10 items in react native and you only want to display just 5 on a screen.

DATA

state = {
      people: [
       {firstName: Ben, lastName: Mark},
       {firstName: Linda, lastName: Hanson},
       {firstName: Arthur, lastName: Merlin},
       {firstName: Jesus, lastName: Joshua}
]
}

VIEW

<ScrollView >
      {
        people.map((item, i) => {
      return (
      <View key={i} style={styles.user}>
      <Card >
       <ListItem
        hideChevron={true}
        title={item.firstName} {item.lastName}
        />
        </Card>
      </View>
          );
        })
      }
    </ScrollView>

Please how can i achieve this?

That depends, do you want to show the first 5, the last 5, random 5 etc. Your question needs to be a bit clearer, what have you tried so far? The array you've given us only contains four. Your map code looks fine, so perhaps write another function which takes this.state.people, get's 5 people, then update the state with this.setState({fivePeople: value}); and then map over that array instead? — user5283119
– user5283119, Commented Jan 29, 2019 at 10:45

Treycos · Accepted Answer · 2019-01-29 10:45:54Z

4

Simple, just use slice on your array :

people.slice(0, 5).map((item, i)

It will only take the first 5 values of your array.

answered Jan 29, 2019 at 10:45

Treycos

7,4913 gold badges29 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jaydeep Galani · Accepted Answer · 2019-01-29 10:46:53Z

3

You can slice your data

<ScrollView >
  {
    people.slice(0, 5).map((item, i) => {
  return (
  <View key={i} style={styles.user}>
  <Card >
   <ListItem
    hideChevron={true}
    title={item.firstName} {item.lastName}
    />
    </Card>
  </View>
      );
    })
  }
</ScrollView>

answered Jan 29, 2019 at 10:46

Jaydeep Galani

4,9713 gold badges31 silver badges48 bronze badges

2 Comments

user5283119 Over a year ago

See @Treycos answer, try to edit/expand on that rather than making a duplicate answer.

Jaydeep Galani Over a year ago

sorry but it was not displayed when i had answered. its just 10 to 20 sec diff

Collectives™ on Stack Overflow

react native display x number of rows from an array

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related