How To Map Through An Object In React

Posted on by Nathaniel Kirk
How to Map through an Object in React

This article will show you how to map through an object in React. Here are some ways to do it with examples to make it easier for readers to understand. Read on it now.

The map() method 

In this section, we will learn the map() function in Javascript. This is a function used to iterate through the elements of an array and allow to process the value of that element.

Javascript map is a function for array objects in Javascript. This function is functionally similar to the forEach loop.

The map() function will iterate through each element of the array. The input parameter is an anonymous function. An anonymous function will have a parameter passed, which is each loop’s element. Inside the anonymous function, the body will have a return statement that returns a value, and this value will replace that element.

Syntax:

array.map(function(item))

Parameter:

  • item: Repeating element

Let’s look at the example below to understand more about the map() function in JS:

Code:

var name = [
    "Jack",
    "Jame",
    "John"
];
 
name.map(function(item) {
    console.log(item);
});

Output:

Jack
Jame
John

Object

Objects in JavaScript, like other languages, can be compared to objects in real life. The concept of objects in JavaScript can be understood as actual objects in real life.

In JavaScript, an object is an independent entity with properties and types. Take the cup as an example. A cup is an object that has properties of its own. A cup has its colour, design, weight, material, etc. Similarly, JavaScript objects can have properties that define their properties.

An object in Javascript is a collection of key-value pairs.

You have three ways to declare objects in Javascript:

  • Use {} keyword
  • Use new Object() syntax
  • Using static method

Here is an example of creating the null object in JS:

Code:

// Literal
const car = { };

// Constructor
const bike = new Object();

// Static method
const motorbike = Object.create({ });

Here we will come to how to map through an object.

Map through an object in React

Map with keys of an object

In this way, we will map through the object by mapping through the object’s key. When we use the keys() method, it will return an array, then we can use Array.map() method. Take a look at the code below, and you will be able to see how it works.

Code:

export default function App() {
    const car = {
        id: 1,
        name: 'GTR',
        price: "113000$",
    };

    return (
        <div>
            {Object.keys(car).map((key, index) => {
                return (
                    <div key={index}>
                        <h1>{key}: {car[key]}</h1>
                    </div>
                );
            })}
        </div>
    );
}

So now you can map through the object using the keys() method to get the keys array of the object you want to map.

Map with values of object

Like the keys() method above, we will use the values() method. This method returns an array of the values ​​of the object we need to map through.

Code:

export default function App() {
    const car = {
        id: 1,
        name: "GTR",
        price: "113000$",
    };

    return (
        <div>
            {Object.values(car).map((value, index) => {
                return (
                    <div value={index}>
                      	<h1>{value}</h1>
                    </div>
                );
            })}
        </div>
    );
}

So we can map over an object in Reactjs. Hope it helps you!

Summary

To summarize, we have showed you how to map through an object in React in 2 ways: Map with keys or map with values of the object. Let’s try them to get your desired results.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *