A common beginner React question you’ll find on Stack Overflow is ‘why aren’t my elements displaying when i use the .map method?’ Funnily enough, it’s usually just a small mistake that causes this problem.

But before we dive into how we render lists in React, let’s first understand the map method and how its used in Javascript

What is the map() method?

The map() method basically creates a new array by calling a specific function on each element in the array it’s being performed on.

Let’s take a look at an example:

// 1.
const myArray = [1, 2, 3]

// 2.
const newArray = myArray.map(num => num + 1)

// 3.
console.log(newArray)
//Output: [2, 3, 4]

Let’s break down the example above:

1. First, we declare an array called myArray which contains 3 numbers – 1, 2, 3
   
2. We then perform the .map() function on our array by appending it to myArray.
   
   Inside the parenthesis, we first need to include an argument which will represent each element inside the array. In the example, we passed in ‘num’ to represent each number in the myArray array.
   
   We then have the fat arrow => followed by the function we want to perform on each number inside the myArray array. So in this example, for ever number (num) in myArray, we want to take that number and add 1, therefore the expression num + 1.
   
   We then save the results for every number that we add 1 to into a new array which we declared as newArray.
   
3. Finally, we log the value of the new array to the console and outputs the new values after the map function has been performed.

NOTE**

a. You can use a normal function declaration inside the parenthesis instead of an arrow function if you choose to. Remember to include the return keyword to save the value to the new array. For example:

.map(function(num){
return num + 1
})

b. In the above example, we passed in only one argument which was ‘num’ to represent each element in myArray. This argument is required. But there are also additional arguments we can pass in if needed.

The index is often used as the second argument which will return the position of the current element in the array that’s being mapped. For example:

// 1.
const friends = ["Rob", "Sally", "Joe"]

// 2.
const friendsPositions = friends.map((friend, index) => `${friend} ${index}` )

// 3.
console.log(friendsPositions)
//Output: ['Rob 0', 'Sally 1', 'Joe 2']

In this example:

1. We declared the friends array

2. We mapped the friends array and we passed in two arguments:
friend – the item that represents each friend in the friends array
index – the position that represents each friend’s position

We then added a function that would return the template literal `${friend} ${index}`

3. We then log to the console the new array and we get the name of the friend and the position it is in the array. Remember that the first position in an array starts at 0.

The map function in React

React is a Javascript library so the map function can be used in exactly the same way if need be. When it comes to building dynamic lists, the map method is the usual way but with a slight difference.

Let’s take a look at an example:

const friends = ["Rob", "Sally", "Joe"]

<ul>
  {friends.map((friend) => (
   <li>{friend}</li>
))}
</ul>

Ok, so what’s going on here?

Like usual, we declare an array called friends that contains 3 elements.
Remember that React uses JSX so in order to display a list, we can use the <ul></ul> tags.

Now the rule is that in order to use Javascript inside JSX, we need to inject it inside curly braces { }. So we add the curly braces between the <ul></ul> tags and then we can start with our map method on our friends array.

Now one thing to note that is VERY important is what comes AFTER the fat arrow =>.

In our example above, notice that the parenthesis ( ) are used instead of your typical curly braces { }. This is where a lot of beginners in React make the mistake of adding the curly braces and then wonder why their list isn’t being displayed. The ( ) is used because, if you’re familiar with React, they represent the Render ( ) method which uses parenthesis because it is displaying something.

Then inside the parenthesis, we add the <li><li> tags and again we need to inject inside the JSX the Javascript argument that we passed into the function which represents each individual friend. How do we inject Javascript inside of JSX? That’s right. We add the curly braces {} and pass in the friend.

You’ll then see the following list printed on the screen:

• Rob
• Sally
• Joe

Don’t forget to close off your parenthesis and curly braces here

NOTE**

Although this is correct and you’ll see this list displayed on your screen, you’ll see in the console that React is providing the following warning:

Each child in a list should have a unique “key” prop.

A “key” is basically a special string attribute you should include when you’re creating lists of different elements and these keys help React identify keep track of these elements in the event that they’re ever removed, or added or changed somewhere in the app. Each key needs to be unique and what most developers do is they use a combination of a string and the index of the element just like we discussed in the Javascript section above.

Let’s modify the example above to include the key this time:

const friends = ["Rob", "Sally", "Joe"]

<ul>
  {friends.map((friend, index) => (
   <li key={`Friend-${index}`}>{friend}</li>
))}
</ul>

So this time we passed in a second argument ‘index’ which gives us the position of each element in the friends array. Then inside the <li> element, we added the key attribute where we created a unique key. Each list item would have their key as “Friend-” followed by the position of that element. For example, the “Rob” list item would have the key as “Friend-0” because “Rob” sits at position 0 in the friends array.

Wrap up

So now you know how the map method is used to render lists in React.

Just remember – The most common reason why a React list is not rendering is because someone forgot to use parenthesis ( ) to render the list instead of curly braces { }

Hope this helped and happy coding!