ReactJs how to render pair-value of assoc array

Question

How to render pair-value of assoc array? I have assoc array:

let data = ["foo": 3, "bar": 5, "baz": 6];

and I need to render it in my component. I try something like this:

let content = data.map((value, index) => {
  return (
    <div key={index}}>
      {index}: {value}
    </div>
  );
});

But it does not work.

Answer 1

If you have an object, and you want to iterate the keys and values of the object, use Object.entries() to get an array of key/value pairs. Iterate the array of pairs with Array.map(), and get the key (k) and value (v) using destructuring assignment:

const data = { foo: 3, bar: 5, baz: 6 };

const Example = ({ data }) =>
  Object.entries(data).map(([k, v]) => (
    <div key={k}>
      {k}: {v}
    </div>
  ));

ReactDOM.render(
  <Example data={data} />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="demo"></div>