render first index active tabs in reactjs

Solutions on MaxInterview for render first index active tabs in reactjs by the best coders in the world

showing results for - "render first index active tabs in reactjs"
Emil
01 Jul 2017
1import React, { Component } from "react";
2
3
4class Page extends React.Component {
5constructor(props) {
6super(props);
7this.state = {
8  activeTab: 0,
9};
10this.handleClickActiveTab = this.handleClickActiveTab.bind(this);
11}
12
13handleClickActiveTab(e) {
14  const newActiveTab = e.target.tab;
15 this.setState({
16  activeTab : newActiveTab,
17})
18}
19
20render() {
21  const activeClass ='is-active';
22return (
23  <div styleName="page" className="container">
24    <nav className="full-width-with-padding" styleName="nav-tabs-wrap">
25      <ul styleName="nav-tabs">
26        <li styleName={`nav-tabs__item ${this.state.activeTab == 0 ? activeClass : 
27          ''}`}>
28          <a styleName="nav-tabs__item-link" data-tab="0" onClick= 
29            {this.handleClickActiveTab}>
30            My BQ
31          </a>
32        </li>
33        <li styleName={`nav-tabs__item ${this.state.activeTab == 1 ? activeClass 
34              : ''}`}>
35          <a styleName="nav-tabs__item-link" data-tab="1" onClick= 
36           {this.handleClickActiveTab}>
37            Subscriptions
38          </a>
39        </li>
40        <li styleName={`nav-tabs__item ${this.state.activeTab == 2 ? activeClass 
41             : ''}`}>
42          <a styleName="nav-tabs__item-link" data-tab="2" onClick= 
43             {this.handleClickActiveTab}>
44            Promotions
45          </a>
46        </li>
47        <li styleName={`nav-tabs__item ${this.state.activeTab == 3 ? activeClass 
48               : '' }`}>
49          <a styleName="nav-tabs__item-link" data-tab="3" onClick= 
50             {this.handleClickActiveTab}>
51            Contact
52          </a>
53        </li>
54        <li styleName={`nav-tabs__item ${this.state.activeTab == 4 ? activeClass 
55        : '' }`}>
56          <a styleName="nav-tabs__item-link" data-tab="4" onClick= 
57             {this.handleClickActiveTab}>
58            Bookmark
59          </a>
60        </li>
61      </ul>
62    </nav>
63    <div />
64  </div>
65  );
66}
67}
68
69 export default Page;
70