render first index active tabs in reactjs
import React, { Component } from "react";
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {
activeTab: 0,
};
this.handleClickActiveTab = this.handleClickActiveTab.bind(this);
}
handleClickActiveTab(e) {
const newActiveTab = e.target.tab;
this.setState({
activeTab : newActiveTab,
})
}
render() {
const activeClass ='is-active';
return (
<div styleName="page" className="container">
<nav className="full-width-with-padding" styleName="nav-tabs-wrap">
<ul styleName="nav-tabs">
<li styleName={`nav-tabs__item ${this.state.activeTab == 0 ? activeClass :
''}`}>
<a styleName="nav-tabs__item-link" data-tab="0" onClick=
{this.handleClickActiveTab}>
My BQ
</a>
</li>
<li styleName={`nav-tabs__item ${this.state.activeTab == 1 ? activeClass
: ''}`}>
<a styleName="nav-tabs__item-link" data-tab="1" onClick=
{this.handleClickActiveTab}>
Subscriptions
</a>
</li>
<li styleName={`nav-tabs__item ${this.state.activeTab == 2 ? activeClass
: ''}`}>
<a styleName="nav-tabs__item-link" data-tab="2" onClick=
{this.handleClickActiveTab}>
Promotions
</a>
</li>
<li styleName={`nav-tabs__item ${this.state.activeTab == 3 ? activeClass
: '' }`}>
<a styleName="nav-tabs__item-link" data-tab="3" onClick=
{this.handleClickActiveTab}>
Contact
</a>
</li>
<li styleName={`nav-tabs__item ${this.state.activeTab == 4 ? activeClass
: '' }`}>
<a styleName="nav-tabs__item-link" data-tab="4" onClick=
{this.handleClickActiveTab}>
Bookmark
</a>
</li>
</ul>
</nav>
<div />
</div>
);
}
}
export default Page;