how to map deeply nested objects in table with appropriate columns with rowspans in react.js with dynamic data?

Question

I want to map data in table so that i should have outcome as shown in table. Category data should span across rows if there are sub categories in that category. Similarly sub categories should span according as per categories and sub sub categories. Could any one write down function to map the same in React.js. I am providing JSON for refrence, it will be okay if you amend JSON accordingly. Here's the JSON.

[
    {
        "category_id": 6,
        "parent_id": null,
        "name": "Western Wear",
        "slug": "western-wear",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 7,
                "parent_id": 6,
                "name": "Jumpsuite and Rompers",
                "slug": "jumpsuite-and-rompers",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 10,
                        "parent_id": 7,
                        "name": "Rompers",
                        "slug": "rompers",
                        "sort_order": 0
                    },
                    {
                        "category_id": 11,
                        "parent_id": 7,
                        "name": "Jumpsuite",
                        "slug": "jumpsuite",
                        "sort_order": 0
                    }
                ]
            },
            {
                "category_id": 8,
                "parent_id": 6,
                "name": "Dresses",
                "slug": "dresses",
                "sort_order": 0,
                "subSubCategoryData": [
                    {
                        "category_id": 9,
                        "parent_id": 8,
                        "name": "Dress",
                        "slug": "dress",
                        "sort_order": 0
                    }
                ]
            }
        ]
    },
    {
        "category_id": 7,
        "parent_id": 6,
        "name": "Jumpsuite and Rompers",
        "slug": "jumpsuite-and-rompers",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 10,
                "parent_id": 7,
                "name": "Rompers",
                "slug": "rompers",
                "sort_order": 0,
                "subSubCategoryData": []
            },
            {
                "category_id": 11,
                "parent_id": 7,
                "name": "Jumpsuite",
                "slug": "jumpsuite",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 8,
        "parent_id": 6,
        "name": "Dresses",
        "slug": "dresses",
        "sort_order": 0,
        "subCategoryData": [
            {
                "category_id": 9,
                "parent_id": 8,
                "name": "Dress",
                "slug": "dress",
                "sort_order": 0,
                "subSubCategoryData": []
            }
        ]
    },
    {
        "category_id": 9,
        "parent_id": 8,
        "name": "Dress",
        "slug": "dress",
        "sort_order": 0,
        "subCategoryData": []
    }
]

<table className="admin-table">
                    <thead className="tbl-head">
                        <tr className="tbl-head-raw">
                            {/* <th>Gender</th> */}
                            <th>Category</th>
                            <th> Sub-Category</th>
                            <th> Sub-Sub-Category</th>
                            <th>Created on<br />Updated on</th>
                            <th>Status</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map((category, idx) => <tr>
                            {/* <td rowSpan={12}>Women</td> */}
                            <td>{category.name}</td>
                            {<td rowSpan={category.subCategoryData[0]?.subSubCategoryData?.length}>{
                                category.subCategoryData[0]?.name
                            }</td>}
                            {/* <td>{category.subSubCategoryData?.[0]?.name}</td> */}
                            <td>{'updated at'}</td>
                            <td>{category.slug}</td>
                            <td>
                                <label className="switch">
                                    <input type="checkbox" />
                                    <span className="slider round" />
                                </label>
                            </td>
                            <td className=" edit-view-icon flex">
                                <div className="edit-icon">
                                    <SVG name="#icon-edit" />
                                </div>
                                <div className="view-icon">
                                    <SVG name="#icon-eye" />
                                </div>
                            </td>
                        </tr>)}

                    </tbody>
                </table>

Answer 1

Since your data Array is consist on three levels then you can triverse your array by 3 levels like this.

data.map(level1 =>{
    <td>{level1.name}</td>
    <td>{level1.slug}</td>
    ......
    (level1.subCategoryData.length > 0)?
           level1.subCategoryData.map(level2 =>{
              <td>{level2 .name}</td>
              <td>{level2.slug}</td>
              ......
               (level2.subCategoryData.length > 0)?
                  level2.subCategoryData.map(level3 =>{
                     <td>{level3 .name}</td>
                     <td>{level3 .slug}</td>
                       ......
                  })
               : null
           })
    : null
)}