/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

1 vote417 views1 answer
React native text capitalize
Javascript React
0 vote363 views1 answer
Why is necessary to run react-native run
Javascript React
0 vote329 views1 answer
[Design System React] App element is not defined. Please use Settings.setAppElement(el)
Javascript React
3 votes359 views1 answer
React router dynamic routes
Javascript React
0 vote342 views1 answer
React break out of useeffect
Javascript React
0 vote357 views1 answer
Flipper semantic issue react native
Javascript React
0 vote354 views1 answer
How to add react.memo in export list
Javascript React
0 vote316 views1 answer
React native change image color
Javascript React
1 vote344 views1 answer
React-redux imports
Javascript React
0 vote382 views1 answer
How to show content-type:image/jpg in react
Javascript React