Loop through and render Object key/values with React JSX #react #jsx #objects

render-object-props-in-jsx.js

// Create an Array from the object's keys, then use .map() to loop through each
// key and return your new Array of JSX elements for rendering. Object values
// can be accessed using bracket notation.

const RenderObjectKeyValues = () => {
  const recipeTags = {
    asian: 1,
    beef: 2,
    breakfast: 2,
    cakes: 2,
    chicken: 2,
  };

  return (
    <ul>
      {Object.keys(recipeTags).map((key) => (
        <li>
          {key} ({recipeTags[key]})
        </li>
      ))}
    </ul>
  );
};

export default RenderObjectKeyValues;