/Javascript/React/Render first index active tabs in reactjs

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;

Source: stackoverflow.com

Similar codes

6 votes164 views1 answer
React native docs
Javascript React
0 vote141 views1 answer
React chart chart title
Javascript React
2 votes176 views1 answer
How to use `setState` callback on react hooks
Javascript React
0 vote196 views2 answers
Dispay react component after some time
Javascript React
13 votes197 views10 answers
React navigation
Javascript React
0 vote176 views1 answer
React bootstrap carousel caption placement top
Javascript React
0 vote168 views1 answer
Decrease touchableopacity in react native
Javascript React
0 vote166 views2 answers
React social login buttons
Javascript React
0 vote128 views2 answers
Syntax attribute same as name react
Javascript React
15 votes155 views4 answers
Get query params react
Javascript React