Display key value pairs from looping through an array of objects

Question

I'm learning react and I've got a problem displaying the key value pairs in JSX. An array of objects is shown below.

const heroSection = [
  {
    "Heading color": "#1F1235",
    "Text color": "#1B1425",
    "Button color": "#FF6E6C",
    "Background color": "#F4EFFC",
    "Accent text color": "#E2D9F1"
  },
  {
    "Heading color": "#1F1235",
    "Text color": "#1B1425",
    "Button color": "#FF6E6C",
    "Background color": "#F4EFFC",
    "Accent text color": "#E2D9F1"
  }
];

I'm trying to display key value pairs in JSX. My looping method.

HeroSectionColors.map(color => {
  Object.keys(color).forEach(colorItem => {
    console.log(colorItem, color[colorItem]);
  });
});

In the console the key value pair is shown as I want to. I want to display the key value pairs in the JSX.

{HeroSectionColors.map(color => {
  Object.keys(color).forEach(colorItem => (
   <button className="button-hues">
    <span className="hues-display"></span>
    <div className="hues-info">
    <span className="section-color-name">{colorItem}</span>
    <span className="color-hex">{color[colorItem]}</span>
   </div>
  </button>
 ));
})}

The above code does not work and renders nothing in the browser. Any help is appreciated. P.S. Apologies for any formatting errors.

`Array.forEach()` is used for side effects, and doesn't return anything. Use `Array.map()` instead. Also check out `Object.entries()`, which is more fitting for this case than `Object.keys()`. — Ori Drori, Jan 22 '20 at 19:27

Clarity · Accepted Answer · 2020-01-22T19:40:30.627

3

Use map for object keys iteration instead of forEach. Also you can use Object.entries with array destructuring for easier access to the properties:

{
  HeroSectionColors.map(color => {
    return Object.entries(color).map(([colorName, color]) => (
      <button className="button-hues">
        <span className="hues-display"></span>
        <div className="hues-info">
          <span className="section-color-name">{colorName}</span>
          <span className="color-hex">{color}</span>
        </div>
      </button>
    ));
  });
}

edited Jan 22 '20 at 19:40

answered Jan 22 '20 at 19:35

Clarity

10,730
2
25
35

I think I'm probably doing something wrong. Didn't work for me. I update my object. Can you please have a look. Thanks. – Abeid Ahmed Jan 22 '20 at 19:42
@AbeidAhmed check this sandbox: https://codesandbox.io/s/react-example-bpiss – Clarity Jan 22 '20 at 19:46
Thanks a lot mate! – Abeid Ahmed Jan 22 '20 at 19:49
your code seems works without an error, what do you mean something is wrong? – Hao-Cher Hong Jan 22 '20 at 20:05

score 1 · Answer 2 · answered Jan 22 '20 at 19:33

You need to return that Object.keys() call. Or, as that's all you're doing, you could just do it like this:

{HeroSectionColors.map(color => 
  Object.keys(color).forEach(colorItem => (
   <button className="button-hues">
    <span className="hues-display"></span>
    <div className="hues-info">
    <span className="section-color-name">{colorItem}</span>
    <span className="color-hex">{color[colorItem]}</span>
   </div>
  </button>
 ));
)}

Note the removal of the {} from the top map

score 1 · Answer 3 · answered Jan 22 '20 at 19:49

Assuming that your bracketed code block is appearing within a return value of a React component, you'll need to have the code block return the <button> JSX that would have gone here if it was hard-coded. In that case, forEach is the wrong iterator to use, as it doesn't return a mapped value. Using map instead should suffice:

{heroSection.map(colorObject => {
          const colorPairs = Object.entries(colorObject)
          return colorPairs.map(([key, value]) => {
            return (
              <button className="button-hues">
                <span className="hues-display"></span>
                <div className="hues-info">
                  <span className="section-color-name">{key}</span>
                  <span className="color-hex">{value}</span>
                </div>
              </button>
            );
          });
        })}

score 0 · Answer 4 · answered Jan 22 '20 at 19:29

0

Use map instead of forEach. As forEach doesn’t return anything. Also you need to write return explicitly in your outer map method.

answered Jan 22 '20 at 19:29

Muhammad Hassan Khan

149
5

Display key value pairs from looping through an array of objects

4 Answers4