React Native arrays, lists, maps, and sets

Store many values, choose the right collection, and transform data safely.

Chapter goal: Store many values, choose the right collection, and transform data safely.

Simple explanation

A collection is a row of storage boxes. It keeps related values together so the program can add, find, remove, or process them.

In React Native, this chapter is about organizing many related values. Start with the idea above. Then connect each symbol to a value or action in the example.

Do not try to remember every symbol. First ask what data the program has, what it does with that data, and what result it creates. Technical words become easier when you connect them to those three questions.

Why this topic is important

Most real apps are data moving through collections. In React Native, the syntax may look different from other languages, but the thinking skill transfers: name the data, choose the right operation, and make the next step obvious.

When to use it

Use collections for users, products, lessons, messages, settings, and search results.

Example code

const lessons = ["types", "loops", "functions"];
const progress = { types: true, loops: false };

console.log(lessons[0]);
console.log(progress.types);

Line-by-line explanation

• const lessons = ["types", "loops", "functions"]; — This stores or updates lessons. The value on the right is worked out first, then saved under that name.
• const progress = { types: true, loops: false }; — This stores or updates progress. The value on the right is worked out first, then saved under that name.
• console.log(lessons[0]); — This line supports work across a group of related values. Read it together with the block directly around it.
• console.log(progress.types); — This line supports work across a group of related values. Read it together with the block directly around it.

What the output means

types

The output is evidence that the program followed the instructions. If your result is different, read from the first line and write down how each value changes. That is debugging, not failure.

Mistake example

const lessons = ["types", "loops", "functions"];
const progress = { types: true, loops: false };

console.log(lessons[99]);
console.log(progress.types);

The code assumes item 99 exists. Reading outside a collection can throw an error or produce an invalid value.

Fixed version

const lessons = ["types", "loops", "functions"];
const progress = { types: true, loops: false };

console.log(lessons[0]);
console.log(progress.types);

The corrected version uses a valid item position or a safe collection operation.

Common mistakes

• Using a list when lookup by key should be a map.
• Trusting indexes without checking bounds.
• Duplicating data that should live in one source of truth.

Warning: Change one part at a time. If you change many lines together, it becomes harder to learn which change caused the result.

Real use cases

• Shopping carts.
• Leaderboards.
• Topic catalogs and lesson lists.

Small real-project example

A FlatList renders a whole collection of lessons without manually looping in the UI.

function LessonListScreen({ lessons }) {
  return (
    <FlatList
      data={lessons}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Text>{item.title} — {item.minutes} min</Text>
      )}
    />
  );
}

How the project example works

• lessons is the collection this screen displays, passed in as a prop.
• data tells FlatList which array to render.
• keyExtractor gives each row a stable id so React can track it during updates.
• renderItem runs once per lesson and returns that row's UI.

Practice exercise

1. Add one item.
2. Remove one item safely.
3. Find an item without assuming its index exists.

Tip: If the exercise feels too large, complete only steps 1 to 3. Small working code teaches more than a large unfinished project.

Mini quiz

1. What is the first valid index?
2. When is a map better than a list?
3. What can happen when an index is outside the collection?

How to read AI-generated code

Do not copy AI code first. Read it like a detective. Find the data, follow the changes, and locate the final output. Ask AI to explain a line only after you have made your own guess.

• What data goes in?
• What values are stored?
• What calculation or decision happens?
• What is printed, displayed, saved, or returned?
• What can go wrong?
• Can you rename one value and still explain the code?

React Native reading check

Find the component inputs (props), changing values (state), event handlers, and effects. An effect that fetches data must also handle loading, failure, and a component that leaves the screen.

Before you move on

• I can explain this topic in my own words.
• I can read the small example without AI.
• I can change the example and predict the new result.
• I can find and fix one simple mistake.
• I can name one real project that uses this idea.

Next topic

Next, learn objects and classes. Before opening it, explain this chapter out loud in under one minute.