Bootstrap with React: accordion won't work - twitter-bootstrap-3

Question

I am trying to get a bootstrap accordion running, where my panels are React classes. Somehow this doesn't work:
<ReactBootstrap.Accordion>
<WontWorkPanel pkey={1} />
<WontWorkPanel pkey={2} />
</ReactBootstrap.Accordion>
http://jsfiddle.net/3azxcquh/
The WontWorkPanel is React class that renders the single panel with the key this.props.pkey .
Could someone explain me what I'm doing wrong, or how to do it better?
Thanks!

Answer 1

The Accordion clones its children with new props, and those props control the showing/hiding of the Panel component. To allow that to still work with a custom Panel wrapper, you need to transfer props from the wrapper to the Panel child:
Fiddle: http://jsfiddle.net/ssorallen/3azxcquh/6/
var WontWorkPanel = React.createClass({
render: function() {
return this.transferPropsTo(
<ReactBootstrap.Panel header={"WontWork " + this.props.key} key={this.props.key}>
Anim pariatur cliche reprehenderit, enim eiusmod high life
accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua pu
</ReactBootstrap.Panel>
);
}
});