/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

0 vote357 views1 answer
Convert table to excel reactjs
Javascript React
0 vote377 views1 answer
User account in react
Javascript React
3 votes330 views2 answers
React router hooks
Javascript React
14 votes387 views4 answers
&& in react jsx
Javascript React
0 vote365 views1 answer
Casl react redux
Javascript React
68 votes393 views3 answers
React add inline styles in react
Javascript React
1 vote320 views1 answer
How to install formik in react native
Javascript React
0 vote379 views1 answer
Remarkable react js
Javascript React
0 vote382 views1 answer
How to remove console.log from react native app
Javascript React
1 vote403 views1 answer
React form reload page
Javascript React