Supporting dynamic nav group item

[soomtong]

How can i use dynamic list of in
without modifying package

<NavGroup>
  {results.map(function(result) {
    return <NavGroupItem key={result.id} eventKey={result.id} glyph={result.glyph} text={result.title}>{result.text}</NavGroupItem>;
  })}
</NavGroup>

that results like this

Uncaught TypeError: Cannot read property 'eventKey' of undefined

any suggestion?

[f1nnix]

Same thing here. Based on epp example:

class Sidebar extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      plugins: [
        {
        id: 1,
        title: 'Plugin #1'
        }
      ]
    }
  }

  render() {
    return (
      <Pane ptSize="sm" sidebar>
        <NavGroup activeKey={1} onSelect={this.onSelect}>
          <NavTitle>Plugins</NavTitle>

          {this.state.plugins.map(function(plugin) {
            return <NavGroupItem eventKey={plugin.id} glyph='home' text={plugin.title} />
          })}

        </NavGroup>
      </Pane>
    )
  }
}

I'm getting:

photon.js?a71e:917 Uncaught TypeError: Cannot read property 'eventKey' of undefined module.exports.React.createClass.renderNav @ photon.js?a71e:917(anonymous function) @ photon.js?a71e:947module.exports.React.createClass.render @ photon.js?a71e:951ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?cd59:587ReactCompositeComponentMixin._renderValidatedComponent @ ReactCompositeComponent.js?cd59:607ReactCompositeComponent__renderValidatedComponent @ ReactPerf.js?ef93:66ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:220ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactMultiChild.Mixin.mountChildren @ ReactMultiChild.js?c87d:241ReactDOMComponent.Mixin._createContentMarkup @ ReactDOMComponent.js?1302:591ReactDOMComponent.Mixin.mountComponent @ ReactDOMComponent.js?1302:479ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37ReactCompositeComponentMixin.mountComponent @ ReactCompositeComponent.js?cd59:225ReactCompositeComponent_mountComponent @ ReactPerf.js?ef93:66ReactReconciler.mountComponent @ ReactReconciler.js?6bfa:37mountComponentIntoNode @ ReactMount.js?2f23:266Mixin.perform @ Transaction.js?6dff:136batchedMountComponentIntoNode @ ReactMount.js?2f23:282Mixin.perform @ Transaction.js?6dff:136ReactDefaultBatchingStrategy.batchedUpdates @ ReactDefaultBatchingStrategy.js?ef70:62batchedUpdates @ ReactUpdates.js?ce09:94ReactMount._renderNewRootComponent @ ReactMount.js?2f23:476ReactMount__renderNewRootComponent @ ReactPerf.js?ef93:66ReactMount._renderSubtreeIntoContainer @ ReactMount.js?2f23:550ReactMount.render @ ReactMount.js?2f23:570React_render @ ReactPerf.js?ef93:66(anonymous function) @ index.js?2018:13(anonymous function) @ bundle.js:656__webpack_require__ @ bundle.js:546fn @ bundle.js:77(anonymous function) @ bundle.js:577__webpack_require__ @ bundle.js:546(anonymous function) @ bundle.js:569(anonymous function) @ bundle.js:572
client.js?207a:55 [HMR] connected

We shine the bat signal for you guys, @ragingwind @importre

[flipace]

I managed to get this working by using plain JS instead of JSX for this part.

  const tableItems = this.state.tables.map(this.renderTableItem);
  tableItems.unshift(<NavTitle>some title</NavTitle>);
  const navGroup = React.createElement(NavGroup, {}, tableItems);

    return (
      <Pane ptSize="sm" sidebar>
        {navGroup}
      </Pane>
    );

However, it would be great if this would work without this ugly workaround.

[rageandqq]

+1 for this suggestion, or at the very least have a different error message for this case / noting that dynamically adding NavGroupItems is not supported in the docs. Wrapped my head around this for some time until I found this workaround :)