How to Use map() in React (With Simple Examples)

#javascript #webdev #programming #react

Introduction

map() is a very important method to render lists in React. It helps us render the lists dynamically in the app. The map() solves many problems related to rendering repeated UI elements. We’ll discuss what problems does it solve.

map() in JavaScript

The map() method of Array instances creates a new array populated with the results of calling a provided function on every element in the calling array.

map() is an array function iterating over each element of the array. It creates a new array after performing the specific operation on each element.

What Problems map() Solve?

For better understanding of the map() working and how it is helpful in rendering lists. For example: if I want to render a list of skills in my app. I can do it by writing an un-ordered list or ordered list in a React component. Just like:

This will work. But here’s the catch. In this case, I already know the exact number of list-items. So, I can just copy-paste with the content different. (That’s not recommended and not a good developer practice). In real world applications, we usually don’t know the number of list-items. Or if we know the number of list-items, we should not be iterating ourselves the list items. In that case, we need an iterating function like map(). It makes rendering lists easier for us.

How map() Solves the Problem?

map() allows us to iterate over an array. So, we can first list the items in an array (for this example). For real world applications, you would be fetching the data from a database. And then we can iterate and render each list-item as shown in the code example below:

function App() {
  const skills = ["HTML", "CSS", "JS"];
  return (
    <>
      <h4>Skills</h4>
      <ul>
        {skills.map((skill) => (
          <li>{skill}</li>
        ))}
      </ul>
    </>
  );
}

export default App;

Here, we are using map() to render our skills list. We are iterating over each skill and then rendering it. This solution would have the same effect as manually rendering list. This is efficient in terms that it takes less time to code and is easier to use. Also, it gives us the flexibility that it can render any number of list items i.e., whether it be 3 or 1000. We don’t need to write for each item manually. That’s the advantage of using map().

With this solution, there would be an error/warning message in the console: Each child in a list should have a unique "key" prop.

How to Fix the Console Error?

React wants us to pass a key (a key should be a number or string that can uniquely identify the list-item) to each list item while rendering the list. It is because React uses this key value to manage the list-items. It keeps track of the changes made in the list-item by its key. For beginners, I am not complicating things. So, I just give you the simple solution to the fix the error. (If you want a detailed explanation of how React works and why key is necessary in rendering lists, just comment below to let me know. I will surely bring this soon).

So, for fixing the error, pass the key attribute to each list item as shown in the given example:

<li key={skill}>{skill}</li>

This will fix the error. And now you can render the list without any hesitation. I’ve explained this concept in a simple and beginner-friendly way without going too deep into internal React mechanics. This should help you understand how map() works without confusion.

Note: If you’re learning React, follow me for more beginner-friendly guides.

Conclusion

In this blog, you learnt what is map() in React, how it is useful in rendering lists, what problems exactly the devs face, what is key and how to pass the key value in the list-item.