Sometimes, we want to iterate over object with Object.entries with React.js.

In this article, we’ll look at how to iterate over object with Object.entries with React.js.

How to iterate over object with Object.entries with React.js?

To iterate over object with Object.entries with React.js, we call Object.entries and map.

For instance, we write

const a = {
  a: 1,
  b: 2,
  c: 3,
};

Object.entries(a).map(([key, value]) => {
  // ...
});

in our component to call Object.entries with a to return an array with an array of key-value pairs in object a.

Then we get the key and value from the map callback parameter and render the property key and value.

Conclusion

To iterate over object with Object.entries with React.js, we call Object.entries and map.