Display key value pairs from looping through an array of objects

1
votes

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.

4
javascriptreactjs
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
Can you post the solution please, can't get it to work. - Abeid Ahmed
<div> inside <button> is a funny and absolutely invalid markup. - Roko C. Buljan

4 Answers

3
votes

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>
    ));
  });
}
1
votes

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

1
votes

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>
            );
          });
        })}
0
votes

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