React Map Array Of Object With Nested Object

Contents hide

1 React Map Array of Object with Nested Object

Problem Description:

In react I would like to display id and name of category. How to achieve this assuming the object below is somehow hard for me to understand.

[
    {
        "id": 1,
        "category": {
            "id": 1,
            "name": "CALZATURA",
        }
    },
    {
        "id": 2,
        "category": {
            "id": 2,
            "name": "PELLETTERIA",
        }
    }
]

dataItems.map((item, index) => {
  return (
    <div>
      <h1>{item.title}</h1>
      {category.map((c, i) => (
        <div>
          <p>{c.name}</p>
        </div>
      ))}
    </div>
  );
});

Solution – 1

Assuming your array is stored in a variable named const categories = [...];.

return (
  <div>
    {categories.map((category) => (
      <div>
        <span>{category.id}</span>
        <span>{category.category.name}</span>
      </div>
    )}
  </div>
)

Rate this post