Material-ui transition between old LeftNav menu style and the composability one with Reactjs

Question

Ok, so I am very confused about the way of making a LeftNav menu with material-ui.

I am new on the project and I updated reactjs and material-ui.

So, a lot of stuff have been deprecated about LeftNav from material-ui and I am trying to fix it.

Here is the menu as it was when I opened the project (with all the console warning):

        <LeftNav ref="leftNav"
             docked={false}
             style={{opacity: '0.9'}}
             menuItems={menuItems}
             onChange={this.leftNavOnChange} />

From this array:

var menuItems = [
  { route: '/', text: 'Home' },
  { type: 'SUBHEADER', text: 'Connect' },
  { route: '/categories', text: 'Categories' },
  { route: '/icons', text: 'Icons'},
  { route: '/Tmp', text: 'Tmp', disabled: !Permissions['connect_v2_list_tmp']['isPermitted'] },
  { route: '/wizard', text: 'Wizard', disabled: !Permissions['connect_v2_analyze_spreadsheet']['isPermitted'] },
  { route: '/linkshortener', text: 'Link shortener'},
  { type: 'SUBHEADER', text: 'Visual search' },
  { route: '/whitelist', text: 'Whitelist', disabled: !Permissions['connect_v2_list_whitelist']['isPermitted'] },
  { route: '/blacklist', text: 'Blacklist', disabled: !Permissions['connect_v2_list_blacklist']['isPermitted'] },
  { type: 'SUBHEADER', text: 'Tmp-wise' },
  { route: '/viewer', text: 'Viewer', disabled: !Permissions['connect_v2_view_bw_entity']['isPermitted']},
];

And here is what I did from what I understood about the way of doing it:

        <LeftNav ref="leftNav"
             docked={false}
             style={{opacity: '0.9'}}
             //menuItems={menuItems}
             //onChange={this.leftNavOnChange}
             >
              {menuItems.map(function(items, i) {
                    if (items.route) {
                      return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>;
                    } else {
                      return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>;
                    }
              })}
        </LeftNav>

So, less warning except one : using methods on left nav has been deprecated. Please refer to documentations. but not such a big deal.

My problem here, is that my links are not working. I am staying on the same page. And my other main problem: all the style it had is gone.

So, my question is: am I doing it right?

Or am I missing something owned by reactjs and / or material-ui?

Thanks a lot in advance for the time spent on my request.

Answer 1

This is what I do (I am using react-router):

import { browserHistory } from 'react-router';

handleLeftNav: function (route) {
    browserHistory.push(route);
    this.setState({
      leftNavOpen: false
    });
  },

<MenuItem onTouchTap={() => { return this.handleLeftNav('/route/'); }}>Route</MenuItem>

Answer 2

If you move your map outside of the LeftNav then you should no longer receive this warning. When I compose my LeftNav I follow this pattern and I don't get the error you're reporting. Hope this helps.

    let menuItems = menuItems.map(function(items, i) {
        if (items.route) {
            return <MenuItem linkButton={true} href={items.route} key={i}>{items.text}</MenuItem>;
        } else {
            return <MenuItem data={items.type} key={i}>{items.text}</MenuItem>;
        }
    });

     <LeftNav ref="leftNav"
         docked={false}
         style={{opacity: '0.9'}}
         //menuItems={menuItems}
         //onChange={this.leftNavOnChange}
         >
          { menuItems }
    </LeftNav>