tabs

tabs.md

• i have simple tabs code
• i am trying to move the tabs container inside my li tag, since its a new requirement
• i tried but its working partially.
• now the same tab content is displaying twice
• can you guys tell me how to fix it.
• providing my code below.

      _renderTitles: function () {
      	function labels(child, index) {
        	var activeClass = (this.state.selected === index ? 'active' : '');
     
        	return (
          	<li role="presentation" key={index} className={child.props.liClass}>
            	<a href="#" 
              	className={`sports-tab-header ${activeClass}`}
              	onClick={this.handleClick.bind(this, index)}>
              	<h2>{child.props.label}</h2>
                <p className="sports-subtitle">{child.props.subtitle}</p>
              </a>
            </li>
          );
        }
      	return (
        	<ul className="tabs__labels">
          	{this.props.children.map(labels.bind(this))}
          </ul>
        );
      },
      

not working fiddle https://jsfiddle.net/9e767txs/22/

working fiddle https://jsfiddle.net/9e767txs/9/