React Map Array of Object with Nested Object

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
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject