Bad things happen when there are multiple components with the same name

[mik01aj]

Basically, the page breaks because of keys here:

renderComponents() {
    let { highlightTheme, components } = this.props;

    return components.map((component) => {
        return (
            <ReactComponent highlightTheme={highlightTheme} component={component} key={component.name}/>
        );
    });
}

I think we could detect it in styleguide.loader.js and then either fix it (component #1, component #2, etc) or throw an error with some friendly message.

[sapegin]

Or we can just append component path to key.

[mik01aj]

And later, when we add ids like I did in lovelybooks@bb024de, shall we also use them for the navigation? (I mean relativePath)

[sapegin]

Yeah, I think so.