Categories
React Answers

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

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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