FlatList basics (data, renderItem, keyExtractor) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass the list of items to the FlatList component.

React Native

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

export default function App() {
  const data = [{id: '1', name: 'Apple'}, {id: '2', name: 'Banana'}];
  return (
    <View>
      <FlatList
        data=[1]
        renderItem={({ item }) => <Text>{item.name}</Text>}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

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

Aitems

Bdata

Clist

Darray

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that is not defined.

Passing a non-array value to data.

The FlatList component expects a prop named 'data' which holds the array of items to display.

2fill in blank

medium

Complete the code to correctly extract the unique key for each item in FlatList.

React Native

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

export default function App() {
  const data = [{id: 'a', name: 'Cat'}, {id: 'b', name: 'Dog'}];
  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item.name}</Text>}
        keyExtractor={item => item[1]
      />
    </View>
  );
}

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

A.key

B.name

C.id

D.value

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-unique property like 'name' as key.

Forgetting to return a string key.

The keyExtractor should return a unique string key for each item. Here, 'id' is the unique identifier.

3fill in blank

hard

Fix the error in the renderItem function to correctly display each item name.

React Native

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

export default function App() {
  const data = [{id: '1', name: 'Red'}, {id: '2', name: 'Blue'}];
  return (
    <View>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>[1]</Text>}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

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

Aitem.name

Bitem['name']

Citem.name()

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to call item.name as a function.

Using the whole item object instead of a property.

To display the name property of each item, use 'item.name'. Using 'item.name()' causes an error because name is not a function.

4fill in blank

hard

Fill both blanks to create a FlatList that shows fruit names and uses the correct keyExtractor.

React Native

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

export default function FruitList() {
  const fruits = [{key: 'x', name: 'Mango'}, {key: 'y', name: 'Peach'}];
  return (
    <View>
      <FlatList
        data=[1]
        renderItem={({ item }) => <Text>{item.name}</Text>}
        keyExtractor={item => item[2]
      />
    </View>
  );
}

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

Afruits

Bdata

C.key

D.id

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable name for data.

Using a non-existing property for keyExtractor.

The data prop should be the 'fruits' array. The keyExtractor should use the 'key' property to get unique keys.

5fill in blank

hard

Fill all three blanks to create a FlatList that filters items with id greater than 2 and shows their names.

React Native

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

export default function FilteredList() {
  const items = [
    {id: '1', name: 'One'},
    {id: '3', name: 'Three'},
    {id: '4', name: 'Four'}
  ];
  const filtered = items.filter(item => Number(item.id) [1] 2);
  return (
    <View>
      <FlatList
        data=[2]
        renderItem={({ item }) => <Text>{item[3]</Text>}
        keyExtractor={item => item.id}
      />
    </View>
  );
}

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

A>

Bfiltered

C.name

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong comparison operator in filter.

Passing unfiltered data to FlatList.

Trying to display the whole item object.

The filter uses '>' to select items with id greater than 2. The FlatList data is the filtered array. The renderItem shows item.name.

Practice

1. What is the main purpose of the keyExtractor prop in a React Native FlatList?

easy

A. To handle user taps on list items.

B. To define how each item should be displayed on the screen.

C. To specify the data source for the list.

D. To provide a unique key for each list item to help React identify items.

Solution

1. Step 1: Understand the role of keyExtractor

   The keyExtractor is used to give each item a unique key, which helps React track which items changed, added, or removed.

2. Step 2: Differentiate from other props

   renderItem defines how to show items, data is the list source, and tap handling is done separately.

3. Final Answer:

   To provide a unique key for each list item to help React identify items. -> Option D

4. Quick Check:

   keyExtractor = unique keys [OK]

Hint: Keys uniquely identify items in lists [OK]

Common Mistakes:

• Confusing keyExtractor with renderItem
• Using index as key without keyExtractor
• Thinking keyExtractor handles item display

2. Which of the following is the correct syntax to define a FlatList with data and renderItem props?

easy

A. {item}} />

B. {item}} />

C. {item}} />

D. {data}} />

Solution

1. Step 1: Check prop names

   The correct props are data for the list and renderItem for rendering each item.

2. Step 2: Check renderItem function parameter

   renderItem receives an object with item property, so it should be ({item}) => ....

3. Final Answer:

   <FlatList data={items} renderItem={({item}) => <Text>{item}</Text>} /> -> Option A

4. Quick Check:

   Correct props and destructuring = C [OK]

Hint: Use data and renderItem with ({item}) parameter [OK]

Common Mistakes:

• Using wrong prop names like 'items' or 'render'
• Not destructuring item in renderItem
• Passing item directly without braces

3. Given this code snippet, what will be displayed on the screen?

const data = [{id: '1', name: 'Apple'}, {id: '2', name: 'Banana'}];

<FlatList
  data={data}
  keyExtractor={item => item.id}
  renderItem={({item}) => <Text>{item.name}</Text>}
/>

medium

A. A blank screen because keyExtractor is missing.

B. A list showing 'Apple' and 'Banana' as text items.

C. An error because renderItem is not a function.

D. A list showing '1' and '2' as text items.

Solution

1. Step 1: Analyze data and keyExtractor

   Data has two objects with ids and names. keyExtractor returns item.id, which is correct.

2. Step 2: Analyze renderItem output

   renderItem shows item.name, so it will display 'Apple' and 'Banana'.

3. Final Answer:

   A list showing 'Apple' and 'Banana' as text items. -> Option B

4. Quick Check:

   renderItem shows item.name = Apple, Banana [OK]

Hint: renderItem shows item.name, so names appear [OK]

Common Mistakes:

• Thinking keyExtractor missing causes blank screen
• Confusing item.id with item.name in renderItem
• Assuming renderItem is missing or wrong

4. What is wrong with this FlatList usage?

const data = [{id: 'a'}, {id: 'b'}];

<FlatList
  data={data}
  renderItem={({item}) => <Text>{item.id}</Text>}
/>

medium

A. FlatList requires a style prop to render.

B. renderItem should not use destructuring for item.

C. Missing keyExtractor prop, which may cause warnings or errors.

D. data should be an array of strings, not objects.

Solution

1. Step 1: Check for keyExtractor

   The code does not provide a keyExtractor, so React Native will warn because keys are needed for list items.

2. Step 2: Validate other props

   renderItem correctly destructures item, data can be objects, and style is optional.

3. Final Answer:

   Missing keyExtractor prop, which may cause warnings or errors. -> Option C

4. Quick Check:

   keyExtractor missing = warning [OK]

Hint: Always add keyExtractor for unique keys [OK]

Common Mistakes:

• Ignoring missing keyExtractor warnings
• Thinking renderItem destructuring is wrong
• Believing style prop is mandatory

5. You want to display a list of users with unique IDs, but your data array has duplicate IDs. How should you modify the keyExtractor to avoid key conflicts in FlatList?

const users = [
  {id: '1', name: 'Alice'},
  {id: '1', name: 'Bob'},
  {id: '2', name: 'Charlie'}
];

<FlatList
  data={users}
  keyExtractor={item => item.id}
  renderItem={({item}) => <Text>{item.name}</Text>}
/>

hard

A. Change keyExtractor to combine id and index: (item, index) => item.id + index

B. Remove keyExtractor and use default keys.

C. Use only index as keyExtractor: (item, index) => index.toString()

D. Keep keyExtractor as item.id because duplicates don't matter.

Solution

1. Step 1: Identify duplicate keys problem

   Using only item.id causes duplicate keys for '1', which React warns against.

2. Step 2: Fix keyExtractor to ensure uniqueness

   Combining item.id with index creates unique keys like '11', '12', '20'.

3. Final Answer:

   Change keyExtractor to combine id and index: (item, index) => item.id + index -> Option A

4. Quick Check:

   Unique keys prevent warnings = Change keyExtractor to combine id and index: (item, index) => item.id + index [OK]

Hint: Combine id and index for unique keys [OK]

Common Mistakes:

• Ignoring duplicate keys causing warnings
• Using only index loses stable keys
• Removing keyExtractor causes errors