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;
