Bonjour,

Je souhaite créer un menu avec sous menu dans mon application.
Pour cela, j'ai un fichier de route :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
const dashboardRoutes = [
  {
    sidebarName: "menu1",
    code: "MENU1",
    icon: "content_paste",
    subMenus:[
      {
        subMenu: true,
        private: true,
        path: "/private/table",
        sidebarName: "MENU1_SUBMENU1",
        navbarName: "MENU1_SUBMENU1",
        code: "MENU1_SUBMENU1",
        icon: "content_paste",
        component: TableList
      },
      {
        subMenu: true,
        private: true,
        path: "/private/table",
        sidebarName: "MENU1_SUBMENU2",
        navbarName: "MENU1_SUBMENU2",
        code: "MENU1_SUBMENU2",
        icon: "content_paste",
        component: TableList
      }
    ]
  }, 
  {
    sidebarName: "MENU2",
    code: "MENU2",
    icon: "content_paste",
    subMenus:[
      {
        subMenu: true,
        private: true,
        path: "/private/table",
        sidebarName: "MENU2_SUBMENU1",
        navbarName: "MENU2_SUBMENU1",
        code: "MENU2_SUBMENU1",
        icon: "content_paste",
        component: TableList
      },
      {
        subMenu: true,
        private: true,
        path: "/private/table",
        sidebarName: "MENU2_SUBMENU2",
        navbarName: "MENU2_SUBMENU2",
        code: "MENU2_SUBMENU2",
        icon: "content_paste",
        component: TableList
      }
    ]
  }, 
  { 
    redirect: true, 
    path: "/private", 
    to: "/private/dashboard"
  }
];
Dans ma page menu, j'ai la méthode componentDidMount qui lit mon fichier de route et qui ajoute dans le state pour chaque menu principaux un booléen :
openSubMenuMENU1 : false
openSubMenuMENU2 : false

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
  componentDidMount(){
    {this.props.routes.map((prop, key) => {
      if(prop.subMenus != null){
        const openSubMenuName = 'openSubMenu'+prop.code;
        this.setState({
          [openSubMenuName]:true
        });
      }
    })}
 
  }
Mon problème c'est comment récupérer au niveau de mon html le state qui correspond au CODE.
Par exemple, je veut récupérer openSubMenuMENU2
Je construit mon menu de manière dynamique en parcourant mon fichier de route:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
return (
      <div key={key}>
          <ListItem 
            button 
            className={listItemClasses}
            onClick= {prop.subMenus != null ? this.handleClick : null}
          >
            <ListItemIcon className={this.props.classes.itemIcon + whiteFontClasses}>
              {typeof prop.icon === "string" ? (
                <Icon>{prop.icon}</Icon>
              ) : (
                <prop.icon />
              )}
            </ListItemIcon>
            <ListItemText
              id={prop.code}
              primary={this.props.t(prop.sidebarName)}
              className={this.props.classes.itemText + whiteFontClasses}
              disableTypography={true}
            />
 
            {prop.subMenus != null ? this.handleOpenSubMenu ? <ExpandLess /> : <ExpandMore /> : null}
          </ListItem>
        {prop.subMenus != null ? (
          <Collapse in={this.state.prop.code} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              {prop.subMenus.map((propSubMenu, keySubMenu) => {
                if(propSubMenu.path !== undefined)
                  return this.buildListItemWithNavLink(propSubMenu, keySubMenu, activePro, listItemClasses, whiteFontClasses);
                else
                  return this.buildListItemWithoutNavLink(propSubMenu, whiteFontClasses);
              })}
            </List>
          </Collapse>
        ) : null}
      </div>
    );
Par exemple, je voudrais récupérer l'état dans le state pour la ligne suivante dans le IN :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
 <Collapse in={this.state.prop.code} timeout="auto" unmountOnExit>
prop correspond à un élément de mon fichier de route. par exemple à ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
    sidebarName: "menu1",
    code: "MENU1",
    icon: "content_paste",
    subMenus:[
      {
        subMenu: true,
        private: true,
        path: "/private/table",
        sidebarName: "MENU1_SUBMENU1",
        navbarName: "MENU1_SUBMENU1",
        code: "MENU1_SUBMENU1",
        icon: "content_paste",
        component: TableList
      },
      {
        subMenu: true,
        private: true,
        path: "/private/table",
        sidebarName: "MENU1_SUBMENU2",
        navbarName: "MENU1_SUBMENU2",
        code: "MENU1_SUBMENU2",
        icon: "content_paste",
        component: TableList
      }
    ]
  },