Introduction
Arrays are the most commonly used data structures in the programming community. An array is a collection of items that store data in a linear way. Every item in an array is stored in a particular index and through these indexes, the array is accessed and manipulated.&nbsp;
Arrays are an important part of modern frontend development. The data that is processed on the front-end, is usually stored in arrays. Working with arrays can be tough sometimes. So JavaScript has introduced several in-built array methods. Each of these array methods is created to do a particular job. In the end, the main goal is to ease the developer&rsquo;s job.&nbsp;
The <code>map()</code> method is one of the most commonly used array methods in JavaScript. It has become an important part of modern development. In this tutorial, we will discuss the map method in JavaScript and how to use it with React.js.
&nbsp;
Understanding map() in JavaScript
In simple words, the <code>map()</code> method creates a new array from an existing array. Basically, the <code>map()</code> method executes a function for every item of the array. The new array contains the items returned from this function.&nbsp;
Let&rsquo;s understand the <code>map()</code> method with the help of a simple example.
<pre class="language-javascript"><code>let arr = [10, 20, 30, 40, 50];

let newArr = arr.map((item) =&gt; {

 return item * 2;

});

console.log(newArr);</code></pre>
In the above code, the<code> map()</code> method is used to create a new array from the given array named &ldquo;arr&rdquo;. Every item of the &ldquo;arr&rdquo; is being processed by the function one by one to return its double value.&nbsp;
&nbsp;
Output:
&nbsp;
&nbsp;
The function executed by <code>map()</code> has a second optional argument. This is the index of the current element being iterated by the <code>map()</code> method.
<pre class="language-javascript"><code>let arr = [10, 20, 30, 40, 50];

let newArr = arr.map((item, i) =&gt; {

 console.log(`Index: ${i}`);

 return item * 2;

});

console.log(newArr);

</code></pre>
&nbsp;
Output:&nbsp;
&nbsp;
&nbsp;
More commonly, the <code>map()</code> method is used with an array of objects.&nbsp;
<pre class="language-javascript"><code>let employees = [
 {
 id: 001,
 name: "Tommy",
 age: 23,
 city: "New York",
 },

 {
 id: 002,
 name: "Mike",
 age: 27,
 city: "Detroit",
 },

 {
 id: 003,
 name: "Lisa",
 age: 25,
 city: "Chicago",
 },
];</code></pre>
&nbsp;
Now, suppose we want the &ldquo;name&rdquo; from every object. How to do it? By using the <code>map()</code> method to create a new array that will contain the value of &ldquo;name&rdquo; for every object.&nbsp;
<pre class="language-javascript"><code>let names = employees.map((employee) =&gt; {
 return employee.name;
});</code></pre>
&nbsp;
Output:
&nbsp;
&nbsp;
Remember, if no return statement is provided in the <code>map(</code>), it will return undefined for every iteration.&nbsp;
&nbsp;
map() in React
As mentioned earlier, the <code>map()</code> method is heavily used in React. The most common use of <code>map()</code> in React is to render a list in one way or another. Let&rsquo;s understand how to use the <code>map()</code> method in React to render lists on the UI.&nbsp;
Let&rsquo;s save the following &ldquo;employees&rdquo; array in a separate file named &ldquo;employees.js&rdquo;.
<pre class="language-javascript"><code>let employees = [
 {
 id: 001,
 name: "Tommy",
 age: 23,
 city: "New York",
 },
 {
 id: 002,
 name: "Mike",
 age: 27,
 city: "Detroit",
 },
 {
 id: 003,
 name: "Lisa",
 age: 25,
 city: "Chicago",
 },
 {
 id: 004,
 name: "Kane",
 age: 31,
 city: "New York",
 },
 {
 id: 005,
 name: "Mark",
 age: 37,
 city: "Chicago",
 },
];


export default employees;</code></pre>
We will build a simple React application to display the employee data on the UI using the <code>map()</code> method.&nbsp;
Observe the following code.
<pre class="language-javascript"><code>function App() {
 return (
 &lt;div&gt;
 {employees.map((employee) =&gt; {
 const list = (
 &lt;&gt;
 &lt;ul&gt;
 &lt;li&gt;Id: {employee.id}&lt;/li&gt;
 &lt;li&gt;Name: {employee.name}&lt;/li&gt;
 &lt;li&gt;Age: {employee.age}&lt;/li&gt;
 &lt;li&gt;City: {employee.city}&lt;/li&gt;
 &lt;/ul&gt;
 &lt;hr /&gt;
 &lt;/&gt;
 );
 return list;
 })}
 &lt;/div&gt;
 );
}</code></pre>
Earlier, the function inside the <code>map()</code> method was returning data types such as numbers and strings. But in React, the function can return JSX elements, as it is done in the above code.
<pre class="language-javascript"><code>employees.map((employee) =&gt; {
 const list = (
 &lt;&gt;
 &lt;ul&gt;
 &lt;li&gt;Id: {employee.id}&lt;/li&gt;
 &lt;li&gt;Name: {employee.name}&lt;/li&gt;
 &lt;li&gt;Age: {employee.age}&lt;/li&gt;
 &lt;li&gt;City: {employee.city}&lt;/li&gt;
 &lt;/ul&gt;
 &lt;hr /&gt;
 &lt;/&gt;
 );
 return list;
});

</code></pre>
For every item of the &ldquo;employees&rdquo; array, the <code>map()</code> is returning an unordered list with <code>&lt;hr /&gt;</code> tag.&nbsp;
This <code>map()</code> is placed inside the returning statement of the &ldquo;App&rdquo; component, meaning it will display the values returned by the map on the UI.&nbsp;
&nbsp;
&nbsp;&nbsp;
So, we are not creating a new array here. Instead, we are rendering every returned value from the <code>map()</code> method in the UI. This is the basic use of the <code>map()</code> method in React.&nbsp;
We can also create dynamic lists using the <code>map()</code> method. Observe the following UI.&nbsp;
&nbsp;
Suppose, we want the text added in the input field to be listed below when the button is clicked. This is where the <code>map()</code> method comes in to create dynamic lists.&nbsp;
Observe the following code.
<pre class="language-markup"><code>function App() {
 const [data, setData] = useState([]);
 const [input, setInput] = useState("");


 const clickHandler = () =&gt; {
 const tempData = data;
 tempData.push(input);
 setData(data);
 setInput("");
 console.log(data);
 };



 return (
 &lt;div className="App"&gt;
 &lt;input
 type="text"
 value={input}
 onChange={(e) =&gt; setInput(e.target.value)}
 /&gt;{" "}
 &lt;button onClick={clickHandler}&gt;Add&lt;/button&gt;
 &lt;hr /&gt;
 &lt;/div&gt;
 );
}

export default App;

</code></pre>
In the above code, whenever the button is clicked, the text in the input field will be added into the &ldquo;data&rdquo; array. But as of now, nothing changes in the UI. Let&rsquo;s use the <code>map()</code> method to render the values of the &ldquo;data&rdquo; array on the UI.&nbsp;
<pre class="language-javascript"><code>{
 data.length ? (
 &lt;ul&gt;
 {" "}
 {data.map((value) =&gt; {
 return &lt;li&gt;{value}&lt;/li&gt;;
 })}
 &lt;/ul&gt;
 ) : None;
}</code></pre>
First, we need to check if there is any value in the &ldquo;data&rdquo; array or not. When the array is empty and a value is added, the dynamic list will be created. If a second value is added, it will be inserted in the list and it goes on.&nbsp;
This is how the code looks.&nbsp;
<pre class="language-javascript"><code>import { useState } from "react";

function App() {
 const [data, setData] = useState([]);
 const [input, setInput] = useState("");

 const clickHandler = () =&gt; {
 const tempData = data;
 tempData.push(input);
 setData(data);
 setInput("");
 console.log(data);
 };



 return (
 &lt;div className="App"&gt;
 &lt;input
 type="text"
 value={input}
 onChange={(e) =&gt; setInput(e.target.value)}
 /&gt;

 &lt;button onClick={clickHandler}&gt;Add&lt;/button&gt;

 {data.length ? (
 &lt;ul&gt;
 {data.map((value) =&gt; {
 return &lt;li&gt;{value}&lt;/li&gt;;
 })}
 &lt;/ul&gt;
 ) : None}
 &lt;/div&gt;
 );
}


export default App;

</code></pre>
&nbsp;
Output:
&nbsp;
&nbsp;
&nbsp;
Wrapping it up
So the <code>map()</code> method is a commonly used JavaScript array method. As stated in this tutorial, <code>map()</code> is used to create lists in React. It can be used to render an array as a list or to create dynamic lists as we learned in this tutorial. So, the concept of the <code>map()</code> method is simple, yet very powerful.

Using map() in JavaScript and React.js


Arrays are the most commonly used data structures in the programming community. An array is a collection of items that store data in a linear way. Every item i