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
  }
]

17 thoughts on “Problem in rendering sub menu For a infiinit drop down menu in React JS”

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

Leave a Comment