Handling Multiple Tasks with `.map`

So far, we’ve only been working with one task. But how can we handle multiple tasks at the same time?

For this we will need to make use of JavaScript arrays and the .map() function.

What is an array?

An array is a list of items. In JavaScript, arrays are written with square brackets [], and each item is separated by a comma ,.

const emails = ["hello@mobile.dev", "test@mobile.dev", "world@mobile.dev"];

In the example above, emails is an array with 3 items. Each item is a string.

The .map() function

The .map() function is a way to loop through an array and do something with each item. It returns a new array with the results.

const emails = ["hello@mobile.dev", "test@mobile.dev", "world@mobile.dev"];

const upperCaseEmails = emails.map((email) => {
  return email.toUpperCase();
});

In the example above, we are looping through the emails array and converting each email to upper case. The upperCaseEmails array will contain the following items:

["HELLO@MOBILE.DEV", "TEST@MOBILE.DEV", "WORLD@MOBILE.DEV"];

Have a go at Challenge 1 via the link below to practice using the .map() function:

Try this challenge on CodeSandbox

Using .map() with arrays of objects

In most applications, we will be working with arrays of objects. For example, an array of tasks:

const tasks = [
  {
    id: 1,
    title: "Task 1",
    category: "Category 1",
    isChecked: false,
  },
  {
    id: 2,
    title: "Task 2",
    category: "Category 2",
    isChecked: true,
  },
  {
    id: 3,
    title: "Task 3",
    category: "Category 3",
    isChecked: false,
  },
];

We can use the .map() function to loop through the tasks array and access each task property using dot notation:

const taskTitles = tasks.map((task) => {
  return task.title;
});

The taskTitles array will contain the following items:

["Task 1", "Task 2", "Task 3"];

Have a go at Challenge 2 via the link below to practice using the .map() function with arrays of objects:

Try this challenge on CodeSandbox

Using .map() to render multiple components

In React, we can use the .map() function to render multiple components from objects that we pass into it.

For example, we can render a list of tasks like this:

const tasks = [
  {
    id: 1,
    title: "Task 1",
    category: "Category 1",
    isChecked: false,
  },
  {
    id: 2,
    title: "Task 2",
    category: "Category 2",
    isChecked: true,
  },
  {
    id: 3,
    title: "Task 3",
    category: "Category 3",
    isChecked: false,
  },
];

return (
  <View>
    {tasks.map((task) => {
      return <Task key={task.id} task={task} />;
    })}
  </View>
);

Try this now in your HomeScreen component, inside your app/index.tsx file:

app/index.tsx

import * as React from 'react';
import { View } from 'react-native';
import { Task } from '@/components/Task';

export interface ITask {
  id: number;
  title: string;
  category: string;
  isChecked: boolean;
}

export default function HomeScreen() {
  const task: ITask = {
    title: 'My test item',
    category: 'Test category',
    isChecked: false,
  };
  const initialTasks: ITask[] = [
  {
    id: 1,
    title: "Task 1",
    category: "Category 1",
    isChecked: false,
  },
  {
    id: 2,
    title: "Task 2",
    category: "Category 2",
    isChecked: true,
  },
  {
    id: 3,
    title: "Task 3",
    category: "Category 3",
    isChecked: false,
  },
];

  return (
    <View className="bg-background flex-1 items-center justify-center gap-5 p-6">
      <Task task={task} />
      {initialTasks.map((task) => (
        <Task key={task.id} task={task} />
      ))}
    </View>
  );
}

Testing Your Changes

After implementing these changes:

1. Start your server with npm run dev (if you need to)
2. You should now see a list of 3 tasks
3. You can still edit individual tasks by tapping on them
4. Updates will only affect that one particular task - the others should not be affected

Summary

In this tutorial, we’ve learned how to use the .map() function to render multiple components from an array of objects.

Next steps

In the next tutorial, we will look at how to add a new task to the list.