Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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>
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment