显示循环遍历对象数组的键值对

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. PS Apologies for any formatting errors.

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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