In my console, I keep getting this warning:

Warning: Encountered two children with the same key, Others. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version

I believe this feature enables react to efficiently update the DOM. My only concern is if something is being done about it. Or better asked: what can I do to resolve this?

Right now if you have to programmatically update the sidebar as in the case of the adding new sections they do not render because the tree is only built once right after the component mounts.

Warning: Accessing PropTypes via the main React package is deprecated, and will be removed in React v16.0. Use the latest available v15.* prop-types package from npm instead. For info on usage, compatibility, migration and more, see https://fb.me/prop-types-docs

This warning direct to node_modules\react-sidemenu\lib\SideMenu.js:335

SideMenu.propTypes = {
  items: _react.PropTypes.array,
  onMenuItemClick: _react.PropTypes.func,
  renderMenuItemContent: _react.PropTypes.func,
  theme: _react.PropTypes.string,
  collapse: _react.PropTypes.bool,
  rtl: _react.PropTypes.bool,
  activeItem: _react.PropTypes.string
};

Could we update react.PropTypes to Proptypes?

I tested a simple snippet to test the library, but figured out the items wont collapse. They are always expanded.

    <SideMenu >

            <Item label="Item 1">
                <Item label="Item 1.1">
                    <Item label="Item 1.1.1"/>
                    <Item label="Item 1.1.2" />
                </Item>
                <Item label="Item 1.2"/>
            </Item>
            <Item label="Item 2">
                <Item label="Item 2.1">
                    <Item label="Item 2.1.1"/>
                    <Item label="Item 2.1.2"/>
                </Item>
                <Item label="Item 2.2"/>
            </Item>

    </SideMenu>

When the menu gets initially rendered with all items and sub-items active by default. It collapses upon first click.

It seems the menu comes with a fixed width. How can I control the width of the menu? Thanks.

Thanks a whole lot, your work done is great. I however cannot see how to apply the icon props to work. Any help please?

@banomaster @fortunar
Hi guys,
I found collisions of unique keys.

You use url, thinking that the it's should be unique, but in my case i have duplicates and I've got an errors because of that and:

So, i found place, you just need to concatenate item.value and some random integer value.

Thanks.

I need the possibility to change all class names because my css has to match BEM.

Tried many things. props.history and others, but cannot get it working with react-router-dom

I'm always getting following error while trying to use the component:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Even if I copy paste the example code, getting same issue

I'm hoping to use some non font awesome icons. Looking into the source code, I found some line like this:

<i className={`fa ${item.icon} item-icon`} />

I am wondering if it is better to remove the fa from the library code so that it will not be limited to fa icons. From the end user's perspective, if we want to use fa icons, we simply add fa .

It seems like only items without children are calling onMenuItemClick and passing the value property.

Is there a way to change this behavior and if not, are you considering implementing that?

Cheers

The default theme has a nice mouse hover effect on the menu items, however, the custom theme example doesn't have such effect. How can I modify the custom css(less) so that the custom theme will also have such nice mouse hover effect? Thanks.

If "activeItem" property is set by an external action after rendering of SideMenu, the display of new "Item" is not updated.

1. "activeItem" property is used to intialize component.
2. After, active Item is set by clicking on each Item of SideMenu
3. But, if an external button change value of "activeItem" property, the SideMenu is not render and the look&feel of new active Item is not updated.

Basic example :

`import React, {Component} from 'react';
import {SideMenu, Item} from 'react-sidemenu';

export default class PortalSideMenu extends Component {
constructor(props) {
super(props);
this.changeItem = this.changeItem.bind(this);
this.state = {
activeItem:'/dashboard/requests'
}
}

changeItem(item) {
    this.setState({activeItem: item});
}

render() {
    return (
        <div>
            <button onClick={() => this.changeItem('/dashboard/tasks')}>Change</button>
            <h4>{this.state.activeItem}</h4>
            <SideMenu activeItem={this.state.activeItem}>
                <Item label="Dashboard" icon="fa-tachometer">
                    <Item label="Tasks" value="/dashboard/tasks" icon="fa-folder-open"/>
                    <Item label="Requests" value="/dashboard/requests" icon="fa-folder-open"/>
                </Item>
            </SideMenu>
        </div>
    );
}

}`

It seems when collapse={false}, the old active item doesn't become inactive when a new item is clicked.

Styles are not being applied when I use react css modules and import the component and use it without explicitly including those css files. Can you pls let me know the reason for the same. My build workflow is like this:

"scripts": {
    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
    "start-js": "node scripts/start.js",
    "start": "npm-run-all -p watch-css start-js",
    "build-js": "node scripts/build.js",
    "build": "npm-run-all build-css build-js",
    "test": "node scripts/test.js --env=jsdom"
  },

Is there a way to disable items, so they cannot be activated?
I have menu items that are locked behind permissions and other requirements that I dont necessarily want to hide entirely.

Or alternatively, can the activation and visual change be rejected?

I am not sure what I am doing wrong. I do have children in my menu.

I get this error when import like in the image

but the component and the app render ok when i do import SideMenu from 'react-sidemenu