Summary - Lists

Combine FlatList, renderItem and keyExtractor to write a student list.

Summary - Lists

In this group you learned five things. FlatList shows long lists efficiently. renderItem is the function that draws each item. keyExtractor gives each item a unique key. SectionList shows grouped lists. ListHeaderComponent and ListFooterComponent place fixed components at the start and end.

Now you will combine them into two short tasks: first a student list with FlatList, then a class list with SectionList. The two tasks take you through the whole of lists.

Exercise Write a student list

Complete the empty component. The students array is defined: each object has id and name fields. Return <FlatList data={students} renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.id} />.

Show example solution

import React from 'react';
import { FlatList, Text } from 'react-native';

export default function StudentList() {
  const students = [
    { id: 's1', name: 'Alex' },
    { id: 's2', name: 'Sam' }
  ];
  return (
    <FlatList
      data={students}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item) => item.id}
    />
  );
}

Exercise Write a class list

Complete the empty component. The classes array is defined: two class sections. Return <SectionList sections={classes} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>} keyExtractor={(item, index) => index.toString()} />.

Show example solution

import React from 'react';
import { SectionList, Text } from 'react-native';

export default function ClassList() {
  const classes = [
    { title: '9-A', data: ['Alex', 'Sam'] },
    { title: '9-B', data: ['Bella', 'Chris'] }
  ];
  return (
    <SectionList
      sections={classes}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

Test yourself

Which prop produces a unique key?
```
<FlatList
  data={students}
  renderItem={...}
  ???={(item) => item.id}
/>
```
- keyExtractor
- id
- key
- uniqueKey
Show answer

keyExtractor — keyExtractor returns the unique key for each item.
Match each component to its job

FlatList

Flat list
SectionList

Grouped list
keyExtractor

Unique key
ListHeaderComponent

Start of list

Next lesson: ScrollView

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies