/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 vote305 views2 answers
Editable pre input react
Javascript React
0 vote322 views1 answer
React generate ethereum address
Javascript React
0 vote298 views1 answer
React native add two view
Javascript React
0 vote304 views1 answer
Moment all formats in reactjs
Javascript React
-1 vote304 views2 answers
How to connect react to backend
Javascript React
0 vote301 views1 answer
Insert isValidPhoneNumber in react hook form
Javascript React
1 vote303 views1 answer
React material ui input max length
Javascript React
0 vote297 views1 answer
React make setstate synchronous
Javascript React
0 vote288 views1 answer
Library to add navigation in react native
Javascript React
40 votes287 views5 answers
Fetch react
Javascript React