Setting ActiveLinkId not working

[Chris]

Hi @alpertuna ,

It seems that the activeLinkId property is not wokring as expected.

Example menu item:

var CustomMenuLink = React.createClass({
  onClick: function(e) {
    if(this.props.hasSubMenu) this.props.toggleSubMenu(e);
    else {
      this.props.activateMe(this.props.to);
    }
  },
  render: function() {
    return (
      <div className="metismenu-link" onClick={this.onClick} style={{cursor: 'pointer'}} >
        {this.props.children}
      </div>
    );
  }
});
var Menu = React.createClass({
  getInitialState: function() {
    return {
      activeLinkId: null
    }
  },
  menuSelected: function(selectedItem) {
    var selectedItem = JSON.parse(selectedItem);
    this.setState({
      activeLinkId: selectedItem.id
    });
    this.handleClick(selectedItem.app, selectedItem.ip);
  },
  render: function() {
    var menuItems = [];
    var id = uuid.v4();
    menuItems.push({
      icon: 'dashboard',
      label: 'Dashboard',
      to: JSON.stringify({
        app: 'Dashboard',
        ip: '',
        id: id
      }),
      id: id
    });
    
    <MetisMenu 
      content={menuItems}
      LinkComponent={CustomMenuLink}
      iconNamePrefix="mdi mdi-"
      iconNameStateHidden="chevron-left"
      iconNameStateVisible="chevron-left rotate-minus-90"
      onSelected={this.menuSelected} 
      activeLinkId={this.state.activeLinkId}
    />
  }
});

As you can see, I'm updating the component's state for activeLinkId when a menu item is selected, but for whatever reason, the selected item is not being set as expected. (The reason I'm stringifying the "to" property is because that's the only prop that seems to be passed to a custom LinkComponent from the content config)

Am I doing something wrong here?

[H.Alper Tuna]

Hi @SlowburnAZ
props.activeMe in custom link is already activates it self, so you don't need to use activate again via state. And another point is you should define your content outside render method, even outside of component. Otherwise, content reference will be changed after each render and react-metismenu supposes that content has been changed.

Btw: With v1.2.2, label and id props are available in custom link so you don't need to use indirect json way

[Chris]

On the activation:. Of course! Thanks. On the props:. That's great. Thanks again!

…

On Dec 20, 2016 12:43 AM, "H.Alper Tuna" ***@***.***> wrote: Hi @SlowburnAZ <https://github.com/SlowburnAZ> props.activeMe in custom link is already activates it self, so you don't need to use activate again via state. And another point is you should define your content outside render method, even outside of component. Otherwise, content reference will be changed after each render and react-metismenu supposes that content has been changed. Btw: With v1.2.2, label and id props are available in custom link so you don't need to use indirect json way — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#16 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFZaIWzM6z3c1_L-I6HCgt5m6cijla3sks5rJ4c1gaJpZM4LQc59> .

[H.Alper Tuna]

You are welcome 😊

[Chris]

@alpertuna

I must be doing something wrong with the active link stuff. Even when defining the menuItems array outside of the component, the activeLink doesn't seem to be getting set.

Example:

var menuItems = [];
var CustomMenuLink = React.createClass({
  onClick: function(e) {
    if(this.props.hasSubMenu) this.props.toggleSubMenu(e);
    else {
      this.props.activateMe(this.props.to);
    }
  },
  render: function() {
    return (
      <div className="metismenu-link" onClick={this.onClick} style={{cursor: 'pointer'}} >
        {this.props.children}
      </div>
    );
  }
});
var Menu = React.createClass({
  getInitialState: function() {
    return {
      activeLinkId: null
    }
  },
  menuSelected: function(selectedItem) {
    var selectedItem = JSON.parse(selectedItem);
    this.handleClick(selectedItem.app, selectedItem.ip);
  },
  render: function() {
    menuItems = [];
    menuItems.push({
      icon: 'dashboard',
      label: 'Dashboard',
      to: JSON.stringify({
        app: 'Dashboard',
        ip: ''
      })
    });
    menuItems.push({
      icon: '',
      label: 'Some Other Item',
      to: JSON.stringify({
        app: 'Some other item',
        ip: ''
      })
    });
    
    <MetisMenu 
      content={menuItems}
      LinkComponent={CustomMenuLink}
      iconNamePrefix="mdi mdi-"
      iconNameStateHidden="chevron-left"
      iconNameStateVisible="chevron-left rotate-minus-90"
      onSelected={this.menuSelected}
    />
  }
});

Must the menuItem be static? Or should I not set menuItems to an empty array and rebuild it on every render? The reason I'm rebuilding isn't obvious from this code sample, but the menu can change based on props I pass down to the NavBar component.

[H.Alper Tuna]

You should move your whole definition of menu content;

    var menuItems = [];
    menuItems.push({
      icon: 'dashboard',
      label: 'Dashboard',
      to: JSON.stringify({
        app: 'Dashboard',
        ip: ''
      })
    });
    menuItems.push({
      icon: '',
      label: 'Some Other Item',
      to: JSON.stringify({
        app: 'Some other item',
        ip: ''
      })
    });

This is for react-metismenu avoiding refresh content for each render. Since content reference is changed for each render.

But actual problem seems that, you didn't set class name when link is active. The link is probably activated but there is no indicator when they are activated.
In your custom link component, you should something like this;

var className = 'metismenu-link';
if (this.props.active) className += ' ' + this.props.classNameActive; // Or your custom class name
<div className={className} ....>
    ...
</div>