Loop through an object using map in React

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>
  );