React add css class dynamically

Question

I have a set of tabs and I want to apply different class to the selected tab:

My component:

constructor(props) {
    super(props);

    this.state = {
        activeTab: false,
    };
}

setActiveTab = ()=> {
    this.state.activeTab=true
}

render() {


    return (
        <HtmlPage>

            <div className="tab">

                <InternalLink to={`/settings/user-profile`} >
                    <div className="tablinks">Nutzerprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/company-profile`} >
                    <div className={this.state.activeTab ? 'active':'tablinks'} onClick={this.setActiveTab}>Firmenprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/user-profile`} >
                    <div className="tablinks">Nutzerverwaltung</div>
                </InternalLink>

            </div>

            <div className="content">
                {this.props.children}
            </div>


        </HtmlPage>
    );
}

And my css:

/* Style the tab */
div.tab {
  padding-top: 1%;
  overflow: hidden;
  border: 1px solid #ccc;
}

/* Style the buttons inside the tab */
div.tab .tablinks {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px;
}

/* Change background color of buttons on hover */
div.tab .tablinks:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab .active {
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 20px;
  background-color: #ccc;
}

However, this just sets the class to active for the first clicked tab and not each time I select another tab. How can I fix it?

Shubham Khatri · Accepted Answer · 2017-05-22 12:53:39Z

1

Set a name for the active tab on click, and then compare while setting the class like

constructor(props) {
    super(props);

    this.state = {
        activeTab: '',
    };
}
setActiveTab = (val, e)=> {
    this.setState({activeTab: val})
}
<div className="tab">

                <InternalLink to={`/settings/user-profile`} >
                    <div className={this.state.activeTab == 'user-profile' ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile')}>Nutzerprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/company-profile`} >
                    <div className={this.state.activeTab == 'company-profile ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'company-profile')}>Firmenprofil</div>
                </InternalLink>
                <InternalLink to={`/settings/user-profile`} >
                    <div className={this.state.activeTab == 'user-profile1 ? 'active':'tablinks'} onClick={this.setActiveTab.bind(this, 'user-profile2')}>Nutzerverwaltung</div>
                </InternalLink>

            </div>

edited May 22, 2017 at 12:53

answered May 22, 2017 at 11:12

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Thinker Over a year ago

Somehow this has no effect :( I tried printing this.state in render and it says activeTab=Proxy

Thinker Over a year ago

The error was you are assigning activeTab:val where it should be activeTab:e

Shubham Khatri Over a year ago

my mistake, I always forget the order of input parameters to function :)

Collectives™ on Stack Overflow

React add css class dynamically

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related