javascript

Loop through an object using map in React

When working with data in React, there may be times when you need to loop through an object in order to render a component for each key-value pair. In this article, we'll look at how to do that using the built-in map() function.

const subject = {
    name: 'Math',
    score: 98,
    sub_code: 'M01',
    teacher_name: 'Ramanujam',
};

return (
    <div>
        {Object.keys(subject).map(key => (
            <div key={key}>
                {key}: {subject[key]}
            </div>
        ))}
    </div>
);

Output

name: Math
score: 98
sub_code: M01
teacher_name: Ramanujam

In the above code example, We have a functional component in React. It takes in props as a parameter and returns a div. Inside the div, there is a loop that goes through each key in the subject object. For each key, it creates a new div with the key and the corresponding value from the subject object.

We are using the map() function here to loop through the object and generate multiple div elements from them.

Syntax

{Object.keys(obj).map(key => (
    <element key={key}>{obj[key]}</element>
))}

We are using Object.keys() to get the array of keys from the Object and then loop through it using the map() function. We can also use other methods to loop through an object. We will explain them below one by one.

const subject = {
    name: 'Math',
    score: 98,
    sub_code: 'M01',
    teacher_name: 'Ramanujam',
};

console.log(Object.keys(subject));

// Output -> ["name","score","sub_code","teacher_name"]

Loop through an object using Object.entries() and map() function

We can also use Object.entries() function to make an array from the object and then loop through that array using the map() function in React.

How Object.entries() function works

const subject = {
    name: 'Math',
    score: 98,
    sub_code: 'M01',
    teacher_name: 'Ramanujam',
};

console.log(Object.entries(subject));

// Output -> [["name","Math"],["score",98],["sub_code","M01"],["teacher_name","Ramanujam"]]

Code example - Loop an object using Object.entries() and map()

export function App(props) {
  const subject = {
    name: 'Math',
    score: 98,
    sub_code: 'M01',
    teacher_name: 'Ramanujam',
  };

  return (
    <div>
      {Object.entries(subject).map((item, index) => (
        <div key={index}> {item[0]}: {item[1]} </div>
      ))}
    </div>
  );
}

In the above code example, The App function is a stateless functional component that takes in a props object as an argument. The function returns a div element that contains multiple div elements. Each of the nested div elements represents a key-value pair from the subject object. The key (item[0]) is used as the div element's text content and the value (item[1]) is used as the div element's text content.

You can also write it in a single line

return <div> {Object.keys(subject).map(key => <div key={key}> {key}: {subject[key]} </div> )} </div>;

Or you can also use the below code

const subject = {
    name: 'Math',
    score: 98,
    sub_code: 'M01',
    teacher_name: 'Ramanujam',
  };

  return (
    <div> 
      {Object.entries(subject).map(([key, value]) => 
        <div key={key}> {key}: {value} </div>
      )} 
    </div>
  );

Was this helpful?