Summary - Lists
- React Native course
- Beginner
- Lesson 58/116
- 5 min
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.
Practice 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} />.
Starter code
import React from 'react';
import { FlatList, Text } from 'react-native';
export default function StudentList() {
const students = [
{ id: 's1', name: 'Alex' },
{ id: 's2', name: 'Sam' }
];
// Add a FlatList
return null;
}Sample 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}
/>
);
}Practice 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()} />.
Starter code
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'] }
];
// Add a SectionList
return null;
}Sample 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()}
/>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which prop produces a unique key?
<FlatList
data={students}
renderItem={...}
???={(item) => item.id}
/>- keyExtractor Correct answer
- id
- key
- uniqueKey
Explanation: keyExtractor returns the unique key for each item.
2 Match each component to its job
| Term | Meaning |
|---|---|
FlatList |
Flat list |
SectionList |
Grouped list |
keyExtractor |
Unique key |
ListHeaderComponent |
Start of list |