SectionList for grouped data in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the SectionList component from React Native.

React Native

import { [1] } from 'react-native';

Drag options to blanks, or click blank then click option'

AView

BSectionList

CFlatList

DScrollView

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FlatList instead of SectionList

Forgetting to import SectionList

The SectionList component is used to render grouped lists in React Native.

2fill in blank

medium

Complete the code to define the sections prop with grouped data for SectionList.

React Native

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

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

Drag options to blanks, or click blank then click option'

Aitems

Bdata

Csections

Dlist

Attempts:

3 left

💡 Hint

Common Mistakes

Passing 'data' instead of 'sections'

Passing the wrong variable name

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

3fill in blank

hard

Fix the error in the keyExtractor prop to uniquely identify each item.

React Native

<SectionList
  sections={sections}
  renderItem={({ item }) => <Text>{item}</Text>}
  keyExtractor={(item, index) => item[1]index}
/>

Drag options to blanks, or click blank then click option'

A/

B-

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using arithmetic operators other than '+'

Not returning a string key

The keyExtractor should return a unique string. Concatenating the item with the index using '+' creates a unique key.

4fill in blank

hard

Fill both blanks to correctly render section headers with styling.

React Native

<SectionList
  sections={sections}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text style={{ [1]: 20, [2]: 'bold' }}>{section.title}</Text>}
/>

Drag options to blanks, or click blank then click option'

AfontSize

Bcolor

CfontWeight

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'color' instead of 'fontWeight'

Using 'margin' instead of 'fontSize'

The style uses fontSize to set text size and fontWeight to make text bold.

5fill in blank

hard

Fill all three blanks to complete the SectionList with sticky headers and a key extractor.

React Native

<SectionList
  sections={sections}
  stickySectionHeadersEnabled=[1]
  keyExtractor={(item, index) => item + index.toString()}
  renderItem={({ item }) => <Text>{item}</Text>}
  renderSectionHeader={({ section }) => <Text style={{ fontWeight: [2], fontSize: [3] }}>{section.title}</Text>}
/>

Drag options to blanks, or click blank then click option'

Atrue

B'bold'

C18

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Using false for stickySectionHeadersEnabled

Using numeric fontWeight

Using string for fontSize

Sticky headers are enabled by setting stickySectionHeadersEnabled to true. The header text is bold with fontWeight 'bold' and fontSize 18.