It's important to clean up the code and reconsider how data is passed initially.
Currently, initial data is set in state.panes:
this.state = {
'panes' : [
<div className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2">
1testing here testing here
</p>
</div>,
<div className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2">
1testing here testing here
</p>
</div>,
<div className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2 jumping3">
1testing here testing here
</p>
</div>,
<div className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2 jumping3 jumping4">
1testing here testing here
</p>
</div>
]
}
An alternative approach is to wrap all the data under a single parent div (required for React) and pass it to the Sports class:
// Parent div
<div>
<div label="hand" subtitle="swimmings 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab" className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2">
1testing here testing here
</p>
</div>
<div label="leg" subtitle="Approx. swimming 3" liClass="sports-invest-ico" className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2">
2testing here testing here
</p>
</div>
<div label="stomach" subtitle="Approx. swimming 4" liClass="sports-balance-ico" className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2 jumping3">
3testing here testing here
</p>
</div>
<div label="finger" subtitle="Approx. swimming 5" liClass="sports-perf-ico" className="sports-tab-content">
<p className="sports-large-text jumping1 jumping2 jumping3 jumping4">
4testing here testing here
</p>
</div>
</div>,
I've also added attributes to elements previously set in your top-level render on the Basketball elements:
<Basketball label="hand" subtitle="swimmings 1 and 2" liClass="sports-setup-ico first-time-active ft-active-tab">
{this.state.panes[0]}
</Basketball>
....
This part can be simplified to just:
<Sports selected={0} changeContent={this.changeContent}>
{this.state.panes}
</Sports>
Now Sports will receive a wrapper div with individual list item content inside. Adjusting one or two lines allows us to access those children elements:
// We passed the content in a wrapper div, get rid of it
var parent = this.props.children;
console.log(parent);
var children = parent.props.children;
...
return (
<ul className="tabs__labels">
{children.map(labels.bind(this))}
</ul>
);
All the Basketball elements are no longer needed.
Check out the Updated Fiddle.