Récupérer la valeur d'un state

Bonjour,

Je souhaite créer un menu avec sous menu dans mon application.
Pour cela, j'ai un fichier de route :

Code:

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:

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:

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:

<Collapse in={this.state.prop.code} timeout="auto" unmountOnExit>

prop correspond à un élément de mon fichier de route. par exemple à ceci :

Code:

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