The map( ) Function

map()

map() is used for iterating through or displaying lists of similar objects of a component in React. The map() function creates a new array, which it renders to the DOM. This allows you to manipulate data from an array without changing the original array. It is similar to any of the loops you learned in the JavaScript portion of this book.

To use the map() function, you chain it to the array you want to iterate over. You will need to pass it a parameter for callback. This callback will be returned as JSX.
Let’s look at an example.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

let weekDays = [
   "Monday",
   "Tuesday",
   "Wednesday",
   "Thursday",
   "Friday",
   "Saturday",
   "Sunday"
];

function DaysOfTheWeek() {
   const ListOfDays = (props) => {
      return props.map((day) => <li key={props.index}>{day}</li>);
   };
return <ul>{ListOfDays(weekDays)}</ul>;
}

export default function App() {
return (
   <div>
      <DaysOfTheWeek />
   </div>
);
}

Keys

Keys and Arrays

The example above used a simple array that contained a collection of strings. The map() function always uses key-value pairs . When working with an array, unless otherwise specified, the key becomes the index value of the array element. You can set the key equal to the index like we did in line 13 of the example above, however, this may cause an issue if items are rearranged or added to the array.

Keys and Objects

We can use map() for more complicated arrays, such as an array of objects. Like the for loop, you can nest the map() function.

With all of the flexibility of the map() function, we need to ensure it renders the correct element.

The key becomes a value’s unique id that React associates with its component. This helps prevent values being mixed up between components. This unique id is crucial if the items in your array can move, be inserted into other components, or even deleted.

It is not advised to create keys while the application is running. You should include them in your data somehow. A key needs to be a string or number data type. If you have the opportunity to create your data, include some sort of id key. If your data does not have an id then use what is available.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

[{
    "month": "January",
    "season": "Winter"
  },
  {
    "month": "February",
    "season": "Winter"
  },
  {
    "month": "March",
    "season": "Spring"
  }
  //continues through December
  ]
  

We have a collection of months and seasons. We don’t have any id values declared in the JSON file. Keys need to be either a number or string. Let’s use the month values as our keys.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

   import calendar from "../components/Calendar";

   function SeasonSorting() {
   const whichSeason = calendar.map((cal) => (
      <li key={cal.month}>
         {cal.month} is part of <b>{cal.season}</b>
      </li>
   ));
   return <ol>{whichSeason}</ol>;
   }

   export default SeasonSorting;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

   [
   {
      "id": 1,
      "month": "January",
      "season": "Winter"
   },
   {
      "id": 2,
      "month": "February",
      "season": "Winter"
   },
   {
      "id": 3,
      "month": "March",
      "season": "Spring"
   }
   //continues to December
   ]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

   import calendar from "../components/Calendar";

   function SeasonSorting() {
   const whichSeason = calendar.map((cal) => (
      <li key={cal.id}>
      {cal.month} is part of {cal.season}
      </li>
   ));
   return <ol>{whichSeason}</ol>;
   }

      export default function App() {
      return (
         <div>
            <SeasonSorting />
         </div>
      );
      }

Mapping conditions

We can also use map() to render array elements based on conditions. This can be useful if you do not want every item in your list rendered. You can use any of the conditional methods addressed above.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import calendar from "../components/Calendar";

let monthChoice = "August";

function ConditionInsideMap() {
  return (
    <div>
      {calendar.map((props) => {
        return props.month === monthChoice ? (
          <h2 key={props.id}>
            {props.month} is part of the {props.season} season
          </h2>
        ) : null;
      })}
    </div>
  );
}

export default ConditionInsideMap;

In the example above, we import the calendar and pass it to map(). The map() function compares the month string to the monthChoice variable. If they are equal, then the <h2> message will render to the screen. Otherwise, the screen will stay blank. This example uses a ternary operator.

Check Your Understanding

Warning: Each child in a list should have a unique "key" prop.

1
2
3
4
5
6
7

const digits = [12, 65, 72, 33, 2, 99];

function ListOfNums() {
  return digits.map((number, index) => <li>{number}</li>);
}

export default ListOfNums;