SectionList for grouped data in React Native

Introduction

A SectionList helps you show lists that have groups or categories. It makes it easy to see items sorted by sections.

You want to show contacts grouped by the first letter of their name.

You have a list of recipes grouped by meal type like Breakfast, Lunch, Dinner.

You want to display tasks grouped by their status like To Do, In Progress, Done.

You want to show events grouped by date or month.

You want to organize products by category in a shopping app.

Syntax

React Native

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

const DATA = [
  {
    title: 'Group Title',
    data: ['item1', 'item2']
  },
  {
    title: 'Another Group',
    data: ['item3', 'item4']
  }
];

export default function App() {
  return (
    <SectionList
      sections={DATA}
      keyExtractor={(item, index) => item + index}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
    />
  );
}

The sections prop takes an array of objects, each with a title and a data array.

renderItem shows each item, and renderSectionHeader shows the group title.

Examples

This shows an empty list with no groups or items.

React Native

const DATA = [];

// Empty list example
<SectionList sections={DATA} renderItem={() => null} renderSectionHeader={() => null} />

This shows one group with a single item.

React Native

const DATA = [
  { title: 'Fruits', data: ['Apple'] }
];

// One group with one item
<SectionList sections={DATA} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text>{section.title}</Text>} />

This shows two groups each with multiple items.

React Native

const DATA = [
  { title: 'Fruits', data: ['Apple', 'Banana'] },
  { title: 'Vegetables', data: ['Carrot', 'Peas'] }
];

// Multiple groups with multiple items
<SectionList sections={DATA} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text>{section.title}</Text>} />

Sample App

This app shows a list with two groups: Fruits and Vegetables. Each group has items listed below its title.

React Native

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

const DATA = [
  {
    title: 'Fruits',
    data: ['Apple', 'Banana', 'Orange']
  },
  {
    title: 'Vegetables',
    data: ['Carrot', 'Peas', 'Broccoli']
  }
];

export default function App() {
  return (
    <View style={styles.container}>
      <SectionList
        sections={DATA}
        keyExtractor={(item, index) => item + index}
        renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
        renderSectionHeader={({ section }) => <Text style={styles.header}>{section.title}</Text>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 40, paddingHorizontal: 20 },
  header: { fontSize: 24, fontWeight: 'bold', backgroundColor: '#eee', paddingVertical: 5 },
  item: { fontSize: 18, paddingVertical: 3, paddingLeft: 10 }
});

Important Notes

SectionList is efficient for large grouped lists because it only renders visible items.

Time complexity depends on the number of items, but SectionList optimizes rendering.

Common mistake: forgetting to provide a unique keyExtractor for items can cause warnings.

Use SectionList instead of FlatList when you want to group items under headers.

Summary

SectionList shows lists grouped by sections with headers.

Each section has a title and an array of items.

Use renderItem for items and renderSectionHeader for group titles.

Practice

1. What is the main purpose of using SectionList in React Native?

easy

A. To display a list of items grouped by sections with headers

B. To create a grid layout of images

C. To handle user input forms

D. To navigate between screens

Solution

1. Step 1: Understand SectionList usage

   SectionList is designed to show lists grouped by sections, each with a header and items.

2. Step 2: Compare options with SectionList purpose

   Options B, C, and D describe other UI or functionality unrelated to grouped lists.

3. Final Answer:

   To display a list of items grouped by sections with headers -> Option A

4. Quick Check:

   SectionList = grouped list display [OK]

Hint: SectionList groups items with headers, unlike FlatList [OK]

Common Mistakes:

• Confusing SectionList with FlatList
• Thinking SectionList is for navigation
• Assuming SectionList creates grids

2. Which of the following is the correct way to define the sections prop for a SectionList?

easy

A. [{ title: 'Fruits', data: ['Apple', 'Banana'] }, { title: 'Veggies', data: ['Carrot'] }]

B. ['Fruits', 'Apple', 'Banana', 'Veggies', 'Carrot']

C. { title: 'Fruits', items: ['Apple', 'Banana'] }

D. [{ header: 'Fruits', items: ['Apple', 'Banana'] }]

Solution

1. Step 1: Recall SectionList sections structure

   Each section is an object with a title and a data array of items.

2. Step 2: Check options for correct keys and structure

   [{ title: 'Fruits', data: ['Apple', 'Banana'] }, { title: 'Veggies', data: ['Carrot'] }] matches the required format. Options B, C, and D use wrong keys or structure.

3. Final Answer:

   [{ title: 'Fruits', data: ['Apple', 'Banana'] }, { title: 'Veggies', data: ['Carrot'] }] -> Option A

4. Quick Check:

   sections = array of {title, data} objects [OK]

Hint: Sections need title and data keys exactly [OK]

Common Mistakes:

• Using wrong keys like 'items' or 'header'
• Passing a flat array instead of array of objects
• Confusing data array with section title

3. Given this code snippet, what will be displayed as section headers?

const sections = [
  { title: 'A', data: ['Apple', 'Apricot'] },
  { title: 'B', data: ['Banana'] }
];

<SectionList
  sections={sections}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
/>

medium

A. No headers will be shown

B. Apple and Banana as headers

C. Only A as header, B is ignored

D. A and B as headers above their items

Solution

1. Step 1: Understand renderSectionHeader usage

   The renderSectionHeader renders the title of each section as header.

2. Step 2: Identify section titles in data

   Sections have titles 'A' and 'B', so these will be shown as headers above their items.

3. Final Answer:

   A and B as headers above their items -> Option D

4. Quick Check:

   Section titles = headers [OK]

Hint: Section headers come from section.title, not items [OK]

Common Mistakes:

• Thinking items become headers
• Assuming only first section shows header
• Forgetting to use renderSectionHeader

4. What is wrong with this SectionList usage?

const sections = [
  { title: 'Numbers', data: 12345 }
];

<SectionList
  sections={sections}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
/>

medium

A. The title property must be an array

B. The data property should be an array, not a number

C. renderItem should be renderSectionFooter

D. sections should be a flat array, not array of objects

Solution

1. Step 1: Check the type of data property

   The data property must be an array of items, but here it is a number (12345).

2. Step 2: Understand consequences of wrong data type

   This will cause runtime errors because SectionList expects an array to iterate over.

3. Final Answer:

   The data property should be an array, not a number -> Option B

4. Quick Check:

   data must be array [OK]

Hint: data must always be an array, never a single value [OK]

Common Mistakes:

• Passing a single value instead of array to data
• Confusing title type with data type
• Using wrong render method names

5. You want to display a SectionList with sections for weekdays and weekend, but only show days that start with 'S'. How should you prepare the sections data?

hard

A. [{ title: 'Weekdays', data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] }]

B. [{ title: 'Weekdays', data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'] }, { title: 'Weekend', data: ['Saturday', 'Sunday'] }]

C. [{ title: 'Weekdays', data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].filter(day => day.startsWith('S')) }, { title: 'Weekend', data: ['Saturday', 'Sunday'].filter(day => day.startsWith('S')) }]

D. [{ title: 'Days', data: ['Saturday', 'Sunday'] }]

Solution

1. Step 1: Filter days starting with 'S' in each group

   Use filter(day => day.startsWith('S')) on weekdays and weekend arrays to keep only days starting with 'S'.

2. Step 2: Assign filtered arrays to correct section titles

   Weekdays filtered will be empty, weekend filtered will have 'Saturday' and 'Sunday'. This matches the requirement.

3. Final Answer:

   [{ title: 'Weekdays', data: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].filter(day => day.startsWith('S')) }, { title: 'Weekend', data: ['Saturday', 'Sunday'].filter(day => day.startsWith('S')) }] -> Option C

4. Quick Check:

   Filter each section's data by startsWith('S') [OK]

Hint: Filter each section's data array before passing to SectionList [OK]

Common Mistakes:

• Not filtering weekdays, showing all days
• Combining all days into one section
• Ignoring filtering and passing raw arrays