CODEWITHSUNDEEP
javascriptreactjs
Егор Кротенко
Егор Кротенко

Reputation: 818

Need Change active class in tab ( react)

If I click Second page,after reload page, all tabs get class CURRENT, How to fix this? How to disable current class on first TAB ? If i remove activeClassName="current", After Reloading current class switch to first tab, but I saw second tab content

 import React from 'react'
import { Link, browserHistory,IndexLink } from 'react-router'




class Tabs extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
              index: ''                
        };
        this.onclick = this.onclick.bind(this);
    }

    onclick(index) {
        this.setState({index});
    }

    getListItem(){
        let numbers = this.props.menuitems;
        let listItems = numbers.map((item,index) =>
                <li

                  onClick={this.onclick.bind(this, index)} key={index}>

          <Link to={item.link} activeClassName="current"
           className={index == this.state.index? "tab-link current" : "tab-link"}>{item.linkName}</Link>
                  </li>
        );
        return listItems;
    }

    render() {
        return (
            <div>
                <ul className="tabs" >{this.getListItem()}</ul>
                <div className="tabs-header-stripe"></div>
            </div>
        );
    }
}
export default Tabs

Upvotes: 3

Views: 4942

Answers (2)

Mayank Shukla
Mayank Shukla

Reputation: 104369

According to the scenario u described, you need a stateful component instead of stateless function component. Store the index of current tab in state variable and update it inside onclick method, during the rendering compare the index of state variable with the index of item, if they are same then apply the class. Try this a similar example, it should work in ur case also:

class HelloWidget extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
              index: ''                
        };
        this.onclick = this.onclick.bind(this);
    }

    onclick(index) {
        this.setState({index});
    }

    getListItem(){
        let numbers = this.props.menuitems;
        let listItems = numbers.map((item,index) =>
                <li style={{color: this.state.index==index?'red': 'black'}} className={this.state.index == index ? "tab-link current" : "tab-link"} onClick={this.onclick.bind(this, index)} key={index}>{index}-{item.number}</li>
        );
        return listItems;
    }

    render() {
        return (
            <div>
                <ul className="tabs" >{this.getListItem()}</ul>
                <div className="tabs-header-stripe"></div>
            </div>
        );
    }
}

React.render(<HelloWidget menuitems={[{number:0, index:0}, {number:1, index:1}, {number:3, index:3}]}/>, document.getElementById('container'));

check the jsfiddle for working example: https://jsfiddle.net/27po3p4b/

Upvotes: 1

naortor
naortor

Reputation: 2089

the className current is only on the first tab because you are checking if index === 0 (first tab) and if true - you are adding the current class.

You need to keep a state of activeTabIndex and on your onClick function change the activeTabIndex to the right index.

and then you can check 

className={index === this.state.activeTabIndex ? "tab-link current" : "tab-link"}

Upvotes: 0

Related Questions