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.