Reactjs Tab Component I made a simple bare bones Tab component, i'm a beginner when it comes to ReactJS so any advice regarding the codes functionality is greatly appreciated.

Tab.js Component

import React from 'react';

class Tabs extends React.Component {

    constructor() {

        super();

        this.state = {
            activeIndex : 0
        }
    }

    handleOnClick(key, event) {

        event.preventDefault();

        this.setState({
            activeIndex : key
        });
    }

    renderNavItem(key) {

        let tab = this.props.children[key];

        return (
            &lt;li key={ key } className={ this.state.activeIndex == key ? 'active' : ''}&gt;
                &lt;a href="#" onClick={ this.handleOnClick.bind(this, key) }&gt;{ tab.props.title }&lt;/a&gt;
            &lt;/li&gt;
        );
    }

    render() {

        let index = 0;
        let active = this.state.activeIndex;

        let tabs = React.Children.map(this.props.children, function (child) {
            return React.cloneElement(child, {
                active : child.props.active === true ? true : (active == index++)
            });
        });

        return (
            &lt;div className={ this.props.className }&gt;
                &lt;ul className="tabs-nav"&gt;
                    { Object.keys(this.props.children).map(this.renderNavItem.bind(this)) }
                &lt;/ul&gt;
                &lt;div className="tabs-content"&gt;
                    { tabs }
                &lt;/div&gt;
            &lt;/div&gt;
        )
    }
}

class Tab extends React.Component {

    render() {

        return (
            &lt;div className={ "tab-panel" + (this.props.active ? ' active' : '') }&gt;
                { this.props.children }
            &lt;/div&gt;
        )
    }
}

Tab.defaultProps = { 
    active : false 
};

export default {
  Tabs,
  Tab
};


Usage

import React from 'react';
import {Tabs, Tab} from './Tabs';

class App extends React.Component {

    render() {

        return (      
            &lt;Tabs className="tabs-wrapper"&gt;
                &lt;Tab active="true" title="Tab One"&gt;Tab One content&lt;/Tab&gt;
                &lt;Tab title="Tab Two"&gt;
                    &lt;div&gt;Tab Two Content&lt;/div&gt;
                &lt;/Tab&gt;
            &lt;/Tabs&gt;       
        );
    }
}

React.render(
    &lt;App/&gt;,
    document.getElementById('react_example')
);


Example

http://jsbin.com/hajokofavu/edit?js,output
As there's not all that much code here to review, I've reviewed some style points:

You have some strange use of whitespace throughout your code:


handleOnClick(key, event) {

    event.preventDefault();

    this.setState({
        activeIndex : key
                // ^-- whitespace shouldn't be before a property colon
    });
}



and not necessarily that it's wrong, but there's a lot of empty whitespace lines that make your program look a lot beefier than it should.


child.props.active === true ? true : (active == index++)



You don't need to compare properties to booleans as simply specifying the variable without comparison performs a boolean comparison:

var thing = true;
console.log(thing === true ? 1 : 2); // identical
console.log(thing ? 1 : 2);          // identical


You've also got some inconsistency in your use of semicolons:


constructor() {

    super();

    this.state = {
        activeIndex : 0
    }
}