propsvsstate.js

class Tabs extends React.Component {
  static propTypes = {
    data: React.PropTypes.array.isRequired
  }

  state = {
    activeTabIndex: 0
  }

  handleTabClick(activeTabIndex) {
    this.setState({ activeTabIndex })
  }

  renderTabs() {
    return this.props.data.map((tab, index) => {
      return (
        <div onClick={() => this.handleTabClick(index)}>{tab.name}</div>
      )
    })
  }

  renderPanel() {
    const tab = this.props.data[this.state.activeTabIndex]
    return (
      <div><p>{tab.description}</p></div>
    )
  }

  render() {
    return (
      <div>
        <div>
          {this.renderTabs()}
        </div>
        <div>
          {this.renderPanel()}
        </div>
      </div>
    )
  }
}