JavaScript: How to access an array object inside an object-CodePudding

I am struggling to access an array object inside of an object in JavaScript. Here is the overall object structure.

categories: Array(5)
0:
name: "Electronics"
subCategories: Array(16)
0:
name: "Video Games & Accessories"
__typename: "SubCategory"
[[Prototype]]: Object
1: {__typename: 'SubCategory', name: 'UPS & Surge Protection'}
2: {__typename: 'SubCategory', name: 'Tablets'}

Here is my react code for fetching the object.

import React from "react";
import { useQuery, gql } from "@apollo/client";

const CATEGORY = gql`
  {
    categories {
      name
      subCategories {
        name
      }
    }
  }
`;
const Hero = () => {
  const { data, loading, error } = useQuery(CATEGORY);
  return (
    <div>
      
      <div className="flex space-x-16 p-4 mt-10">
        <div className=" w-64  bg-green-500">
          {data?.categories?.subCategories?.map((launch) => (
            <div key={launch.id}>{launch.name}</div>
          ))}
        </div>
        <div className="flex-1  bg-green-500">dgfd</div>
      </div>
    </div>
  );
};

export default Hero;

I wanted to map subCategory name dynamically. What is my mistake on here?

<div className="flex space-x-16 p-4 mt-10">
            <div className=" w-64  bg-green-500">
              {data?.categories?.subCategories?.map((launch) => (
                <div key={launch.id}>{launch.name}</div>
              ))}
            </div>

Here is the json data

{
  "categories": [
    {
      "__typename": "Category",
      "name": "Electronics",
      "subCategories": [
        {
          "__typename": "SubCategory",
          "name": "Video Games & Accessories"
        },
        {
          "__typename": "SubCategory",
          "name": "UPS & Surge Protection"
        },
        {
          "__typename": "SubCategory",
          "name": "Tablets"
        },
        {
          "__typename": "SubCategory",
          "name": "TV's"
        },
        {
          "__typename": "SubCategory",
          "name": "Software"
        },
        {
          "__typename": "SubCategory",
          "name": "Routers, Servers & Networking"
        },
        {
          "__typename": "SubCategory",
          "name": "Projectors"
        },
        {
          "__typename": "SubCategory",
          "name": "Printers, Scanners & Copiers"
        },
        {
          "__typename": "SubCategory",
          "name": "Other Electronics"
        },
        {
          "__typename": "SubCategory",
          "name": "Mobile Phones"
        },
        {
          "__typename": "SubCategory",
          "name": "Mobile Accessories"
        },
        {
          "__typename": "SubCategory",
          "name": "Laptops"
        },
        {
          "__typename": "SubCategory",
          "name": "Digital Cameras"
        },
        {
          "__typename": "SubCategory",
          "name": "Desktop Computers"
        },
        {
          "__typename": "SubCategory",
          "name": "Computer Accessories"
        },
        {
          "__typename": "SubCategory",
          "name": "Audio & Video Equipment"
        }
      ]
    },

Thanks

CodePudding user response：

Subcategories are not being accessed as they are inside an array inside categories and won't be accessed directly. Accessing it as categories[0].subcategories or any other valid index should do the job