SectionList for grouped data in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What will this SectionList render?

Consider this React Native code snippet using SectionList. What will the UI show?

React Native

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

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

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

A A flat list showing all items without any headers.

B An empty screen because data is not correctly passed.

C Only the section headers 'Fruits' and 'Vegetables' are shown, no items.

D A list with two headers: 'Fruits' and 'Vegetables', each followed by their items.

💡 Hint

SectionList groups items by sections and shows headers for each group.

SectionList renders each section header and its items. Here, 'Fruits' and 'Vegetables' are headers, each followed by their respective items.

📝 Syntax

intermediate

Identify the syntax error in this SectionList usage

Which option contains a syntax error that will prevent this SectionList from rendering?

React Native

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

const DATA = [
  { title: 'A', data: ['Item1'] }
];

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

A renderSectionHeader={({ section => <Text>{section.title}</Text>}

B keyExtractor={(item) => item}

C renderItem={({ item }) => <Text>{item}</Text>}

D sections={DATA}

💡 Hint

Check for missing closing brackets or parentheses.

Option A is missing the closing parenthesis for the arrow function parameter destructuring, causing a syntax error.

❓ lifecycle

advanced

When does SectionList re-render its items?

Given a SectionList with static sections prop, which action will cause it to re-render its items?

A Updating the sections prop with a new array reference but same content.

B Changing the keyExtractor function to a new function instance.

C Updating the renderItem function to a new function instance.

D Changing the state unrelated to SectionList.

💡 Hint

SectionList uses shallow comparison on sections prop to decide re-render.

SectionList re-renders when the sections prop changes reference, even if content is same. Changing functions alone does not trigger re-render.

❓ navigation

advanced

How to scroll to a specific section in SectionList?

Which method and parameters correctly scroll SectionList to the 'Vegetables' section (index 1)?

A sectionListRef.current.scrollToIndex({ index: 1 })

B sectionListRef.current.scrollToLocation({ sectionIndex: 1, itemIndex: 0 })

C sectionListRef.current.scrollToOffset({ offset: 1 })

D sectionListRef.current.scrollToSection({ section: 'Vegetables' })

💡 Hint

Use scrollToLocation with sectionIndex and itemIndex to scroll to a section header.

scrollToLocation with sectionIndex and itemIndex scrolls to the start of a section. scrollToIndex and scrollToOffset do not support sections.

🔧 Debug

expert

Why does SectionList not display any items?

Given this code, why does the SectionList render only headers but no items?

React Native

const DATA = [
  { title: 'Group1', data: [] },
  { title: 'Group2', data: [] }
];

<SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text>{section.title}</Text>}
/>

A Because renderItem is missing a return statement.

B Because keyExtractor returns duplicate keys causing rendering issues.

C Because the first section's data array is empty, so no items show for it.

D Because sections prop is not an array.

💡 Hint

Check the data arrays inside each section.

The sections have empty data arrays, so no items render; only headers are shown.