Problem in rendering sub menu For a infiinit drop down menu in React JS

i’m building a reactjs eccomerce website that should have a multi level drop down navbar menu

i made a dropdown component and also i made a function for rendering menus and submenus that are categories receive from API

  const renderSubMenu = (items: any) => {
      const menu = items.map((item: any) => {
        return (
          <MenuItem text={item.name} cssStyle={{ fontSize: "15px" }}>
            {item.children &&
              item.children.length > 0 &&
              renderSubMenu(item.children)}
          </MenuItem>
        );
      });

      return menu;
    };

this is my function it helpfully render menus and sub menus but the problem is it also renders Repetitious menus

for example I have an array like this

[
  {
    "id": 2,
    "name": "لامپ ال ای دی",
    "parent": null,
    "children": [],
    "icon": "http://185.206.147.122:8005/media/color_photos/6.png"
  },
  {
    "id": 3,
    "name": "چراغ خواب",
    "parent": null,
    "children": [],
    "icon": "http://185.206.147.122:8005/media/color_photos/1.png"
  },
  {
    "id": 4,
    "name": "سیم برق",
    "parent": null,
    "children": [],
    "icon": "http://185.206.147.122:8005/media/color_photos/3.png"
  },
  {
    "id": 5,
    "name": "لامپ رشد گیاه",
    "parent": null,
    "children": [],
    "icon": "http://185.206.147.122:8005/media/color_photos/4.png"
  },
  {
    "id": 6,
    "name": "کابل برق",
    "parent": null,
    "children": [],
    "icon": "http://185.206.147.122:8005/media/color_photos/5.png"
  },
  {
    "id": 7,
    "name": "لامپ مطالعه",
    "parent": null,
    "children": [],
    "icon": "http://185.206.147.122:8005/media/color_photos/5_8sFlJ8o.png"
  },
  {
    "id": 8,
    "name": "لوازم اکترونیکی",
    "parent": null,
    "children": [
      {
        "id": 9,
        "name": "کامپیوتر و تجهیزات",
        "parent": 8,
        "children": [
          {
            "id": 11,
            "name": "ماوس و کیبورد",
            "parent": 9,
            "children": [
              {
                "id": 12,
                "name": "ماوس",
                "parent": 11,
                "children": [
                  {
                    "id": 14,
                    "name": "ماوس بی سیم",
                    "parent": 12,
                    "children": [],
                    "icon": null
                  }
                ],
                "icon": null
              },
              {
                "id": 13,
                "name": "کیبورد",
                "parent": 11,
                "children": [],
                "icon": null
              }
            ],
            "icon": null
          }
        ],
        "icon": null
      },
      {
        "id": 10,
        "name": "تلفن همراه",
        "parent": 8,
        "children": [],
        "icon": null
      }
    ],
    "icon": null
  },
  {
    "id": 9,
    "name": "کامپیوتر و تجهیزات",
    "parent": 8,
    "children": [
      {
        "id": 11,
        "name": "ماوس و کیبورد",
        "parent": 9,
        "children": [
          {
            "id": 12,
            "name": "ماوس",
            "parent": 11,
            "children": [
              {
                "id": 14,
                "name": "ماوس بی سیم",
                "parent": 12,
                "children": [],
                "icon": null
              }
            ],
            "icon": null
          },
          {
            "id": 13,
            "name": "کیبورد",
            "parent": 11,
            "children": [],
            "icon": null
          }
        ],
        "icon": null
      }
    ],
    "icon": null
  },
  {
    "id": 11,
    "name": "ماوس و کیبورد",
    "parent": 9,
    "children": [
      {
        "id": 12,
        "name": "ماوس",
        "parent": 11,
        "children": [
          {
            "id": 14,
            "name": "ماوس بی سیم",
            "parent": 12,
            "children": [],
            "icon": null
          }
        ],
        "icon": null
      },
      {
        "id": 13,
        "name": "کیبورد",
        "parent": 11,
        "children": [],
        "icon": null
      }
    ],
    "icon": null
  },
  {
    "id": 12,
    "name": "ماوس",
    "parent": 11,
    "children": [
      {
        "id": 14,
        "name": "ماوس بی سیم",
        "parent": 12,
        "children": [],
        "icon": null
      }
    ],
    "icon": null
  },
  {
    "id": 14,
    "name": "ماوس بی سیم",
    "parent": 12,
    "children": [],
    "icon": null
  },
  {
    "id": 13,
    "name": "کیبورد",
    "parent": 11,
    "children": [],
    "icon": null
  },
  {
    "id": 10,
    "name": "تلفن همراه",
    "parent": 8,
    "children": [],
    "icon": null
  }
]

Leave a Comment