Understanding the map() function in React.js

Let’s learn how to transform one array into another array.

Photo by Christin Hume on Unsplash

The Array map() function in JavaScript is used to create a new array with a given array, by executing a function for all the elements in the given array. Consider the below illustration.

Here we have an array of objects called PersonDetails array. For example, suppose you want to get an array of person names like the PersonNames array. For this purpose, we can use the map() function in JavaScript. It will convert the PersonDetails array into PersonNames array.

Below is the PersonDetails array.

const PersonDetails = [
           {id: 1, name: "Kyle", age: 23},
           {id: 2, name: "Taylor", age: 45},
           {id: 3, name: "Anna", age: 30}
]

Now let’s convert this array into PersonNames array.

const PersonNames = PersonDetails.map(person => person.name);

That’s a basic overview of how the map() function can be used in JavaScript. Now let’s move on to learn how it can be used in React.js.

import React from 'react';
function Details() {
   const PersonDetails = [
            {id: 1, name: "Kyle", age: 23},
            {id: 2, name: "Taylor", age: 45},
            {id: 3, name: "Anna", age: 30}
   ]
   const PersonNames = PersonDetails.map(person => 
                         <li key={person.id}>{person.name}</li>)
   return(
      <div>
         <ul>{PersonNames}</ul>
      </div>
   )
}
export default Details;

Here the attribute key should be provided to give elements of the array a stable identity. Keys are important because it lets React identify the changed, newly added or removed items.

When data is in another js file, you need to export PersonDetails array in your js file.

export const PersonDetails = [
          {id: 1, name: "Kyle", age: 23},
          {id: 2, name: "Taylor", age: 45},
          {id: 3, name: "Anna", age: 30}
]

Then you can import the array in your component like below.

import {PersonDetails} from './PersonDetails'

If you want to export your data file as default, then you can do it as follows.

const PersonDetails = [ 
          {id: 1, name: "Kyle", age: 23},
          {id: 2, name: "Taylor", age: 45},
          {id: 3, name: "Anna", age: 30}
]
export default PersonDetails;

Then you can import the data file in your component.

import PersonDetails from './PersonDetails'

Now let’s try another way of doing this.

We can even return components in the map() function. Consider data is in another file as explained before.

Below is the component file. You need to pass props to your component. Here I have passed down person details as one object (p), rather than passing down each individual property of person details. Now I can access the property through props.p.{name of the property}.

import React from 'react';
function Details(props) {
   return(
      <div>
         <ul>
            <li>{props.p.name}</li>
         </ul>
      </div>
   )
}
export default Details;

In App.js file let’s return the Details component with map() function.

import React from 'react';
import Details from './Details';
import PersonDetails from './PersonDetails'
import './App.css';
function App() {
   const PersonNames = PersonDetails.map(person => 
                          <Details key={person.id} p={person} />)
   return (
      <div>
         {PersonNames}
      </div>
   )
}
export default App;

I hope you could get a good understanding of the map() function in React.js from this article.

Happy Coding!