I am attempting to create a sidebar menu in React and I want to know what is the best way to display submenu links/items based on the category? For example, I have 3 categories: "action", "edy", & "horror." Each of these would have submenu items, i.e. - "action" would have "Die Hard", "Ong Bak", and "John Wick."

Example:

Menu

Action
    Die Hard
    Ong Bak
    John Wick

Comedy
    Friday
    Old School
    This is the End

Horror
    Exorcist
    Midsomar
    Hereditary

JSON:

[
  {
    type: 'action',
    key: 'diehard',
    name: 'Die Hard',
    
  },
  {
    type: 'action',
    key: 'ong-bak',
    name: 'OngBak'
  },
  {
    type: 'action',
    key: 'johnwick',
    name: 'JohnWick'
  },
  {
    type: 'edy',
    key: 'friday',
    name: 'Friday'
  },
  {
    type: 'edy',
    key: 'old-school',
    name: 'OldSchool'
  },
  {
    type: 'edy',
    key: 'this-is-the-end',
    name: 'ThisistheEnd',
  }
]

Currently, the way I have it set up won't display it the way I want to. But I wele any suggestions

import React from 'react';
import {Menu} from './menu/menu';
import {SubMenu} from './menu/submenu';
import {SubMenuItem} from './menu/submenuitem';

export function SideMenu({ routes }) {
    return (
        <SideBar>
            <Menu>
                {routes.map((route, index) => {
                    if (route.type === 'action') {
                        return (
                            <SubMenuItem 
                                type={route.type} 
                                key={route.key} 
                                name={route.name} 
                                onClick={onClickHandler} 
                            />
                        );
                    }
                })}
            </Menu>
        </SideBar>
    );
}

I am attempting to create a sidebar menu in React and I want to know what is the best way to display submenu links/items based on the category? For example, I have 3 categories: "action", "edy", & "horror." Each of these would have submenu items, i.e. - "action" would have "Die Hard", "Ong Bak", and "John Wick."

Example:

Menu

Action
    Die Hard
    Ong Bak
    John Wick

Comedy
    Friday
    Old School
    This is the End

Horror
    Exorcist
    Midsomar
    Hereditary

JSON:

[
  {
    type: 'action',
    key: 'diehard',
    name: 'Die Hard',
    
  },
  {
    type: 'action',
    key: 'ong-bak',
    name: 'OngBak'
  },
  {
    type: 'action',
    key: 'johnwick',
    name: 'JohnWick'
  },
  {
    type: 'edy',
    key: 'friday',
    name: 'Friday'
  },
  {
    type: 'edy',
    key: 'old-school',
    name: 'OldSchool'
  },
  {
    type: 'edy',
    key: 'this-is-the-end',
    name: 'ThisistheEnd',
  }
]

Currently, the way I have it set up won't display it the way I want to. But I wele any suggestions

import React from 'react';
import {Menu} from './menu/menu';
import {SubMenu} from './menu/submenu';
import {SubMenuItem} from './menu/submenuitem';

export function SideMenu({ routes }) {
    return (
        <SideBar>
            <Menu>
                {routes.map((route, index) => {
                    if (route.type === 'action') {
                        return (
                            <SubMenuItem 
                                type={route.type} 
                                key={route.key} 
                                name={route.name} 
                                onClick={onClickHandler} 
                            />
                        );
                    }
                })}
            </Menu>
        </SideBar>
    );
}

• javascript
• reactjs
• menu

Share Improve this question Follow edited May 7, 2021 at 16:49 Etep asked May 6, 2021 at 0:41 EtepEtep 3,67144 gold badges2121 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Based on my experience, here is how I done this. I have done this before by creating a json data as the following example. Then, you can use js array map function to iterate each object and check whether the object has a key for subitem then render another style or code block accordingly. If your menu items all have subitem, maybe you may not have to do nested map function in this case. Note that the Submenu ponent will render the parent item then only render its children(subitem). I am using react-bootstrap to help me do the stylling.

Sample output:

All Movies
Action 

                                发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745395780a4625869.html