Hello everyone. In this article, I will be giving information about the map() method, which is a javascript array method, and at the same time, as in my previous Javascript Array Methods articles, we will reinforce the use of the map() method by giving examples of how the map method is used in react projects in daily business life. Let’s get started.
What is the Javascript Map() Method?
The Map() method creates and returns a new array by passing all the elements in the array one by one through the given operation. The map() method works almost identical to the forEach() method. But forEach() does not return an array like the map() method. Now let’s look at the structure of the map() method.
array.map(function(currentValue, index, array), thisValue)- currentValue : Specifies the value of the element being processed.
- index : Specifies the index value of the processed element.
- array : Specifies the array value being processed.
- thisValue : Specifies the this value to be used when the specified operation is running, that is, when the callback function is executed.
Important Warnings
- The Map() method does not modify the default array. A new array element is created depending on the desired operation.
- The map() method will not work on arrays with no elements.
- For each item in an array, it calls and processes the provided function once in sequence.
EXAMPLES
Map() A Standard Example
Let’s create a new array with 2 times each element of the array with numbers in it. Let’s do this with the map() method.
let numbers = [1, 4, 9]
let doubleNumbers = numbers.map(num => num * 2);
console.log(numbers);
console.log(doubleNumbers); Output:
The output of the above code in console will be as follows.
Now let’s see an example of how frontend developers use the map() method in their react projects in their daily business life.
Real Project Use of Map
Map, which is a method that is used a lot in the use of arrays, is one of the methods that developers benefit a lot when developing with React Js. As with the previous array methods, I will be using the jsonplaceholder Rest Api resource for a more realistic use case in the react example of the map method.
In this example, let’s show the json data coming to us at the endpoint “https://jsonplaceholder.typicode.com/posts” on our home page using the card structure.
import { useEffect, useState } from "react";
const Map = () => {
const [data, setData] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((res) => {
setData(res);
});
}, []);
return (
<div id="content">
<h1>Map</h1>
<div className="card">
{data.map((item) => {
return (
<div className="card-item" key={item.id}>
<h2 className="card-title">{item.title}</h2>
<p className="card-description">{item.body}</p>
</div>
);
})}
</div>
</div>
);
};
export default Map;
#content{
width: 100%;
height: 100%;
}
.card-item {
width: 700px;
min-height: 200px;
height: auto;
border: 2px solid #ccc;
box-shadow: 0 2px 10px 2px #ccc;
margin: 20px auto;
padding: 20px;
text-align: center;
border-radius: 10px;
}
.card-username {
font-size: 18px;
font-weight: 600;
color: #fff;
background-color: #e74c3c;
padding: 10px 20px;
border-radius: 10px;
}
.card-title {
font-size: 24px;
font-weight: 800;
color: ;
}
.card-description {
font-size: 18px;
line-height: 1.4;
font-weight: 500;
color: #333;
}Above, with the help of the useEffect hook in React, we pulled our posts from the jsonplaceholder address and then transferred my data to the data state we created with useState. When we print the data in the state on the console screen, we will see the following output.
Yes, our data is coming, but once an empty array is coming and once a full array is coming. I think you are asking why. In React, jsx codes are made before hooks such as useEffect. Therefore, it is normal for the data to be empty at first, but sometimes this can cause an error in the map() method. Therefore, if you make at least one of the following two edits in the code in the data.map section above, you will minimize the error encountered.
{data?.map((item) => {
return (
<div className="card-item" key={item.id}>
{/* <span className="card-username">{username(item.userId)}</span> */}
<h2 className="card-title">{item.title}</h2>
<p className="card-description">{item.body}</p>
</div>
);
})} {data && data.map((item) => {
return (
<div className="card-item" key={item.id}>
{/* <span className="card-username">{username(item.userId)}</span> */}
<h2 className="card-title">{item.title}</h2>
<p className="card-description">{item.body}</p>
</div>
);
})}React Coding Output
Let’s look at the output of this example we made with react.js. As you can see below, all our data has arrived and is listed.
The End
Yes, we have come to the end of this blog post. In this blog post, we learned the standard usage of map in arrays and how it is used in the React project. See you in the next blog post. Goodbye.
