How to highlight the selected bootstrap tab in React
<p>I am using react for my application, and I have a bootstrap navigation bar menu has three tabs. I want to highlight the selected tab.</p>

<p>Here is the html code in my render() function.</p>

<pre><code>&lt;div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
  &lt;ul className="nav navbar-nav navbar-left"&gt;
    &lt;li onClick={event =&gt; this.handleClick('tab1', event)} className={(this.state.activeTabClassName === "tab1") ? "active" : ""}&gt;&lt;a href="#"&gt;HOME&lt;span className="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li onClick={event =&gt; this.handleClick('tab2', event)} className={(this.state.activeTabClassName === "tab2") ? "active" : ""}&gt;&lt;a href="/#/resources"&gt;RESOURCES&lt;/a&gt;&lt;/li&gt;
    &lt;li onClick={event =&gt; this.handleClick('tab3', event)} className={(this.state.activeTabClassName === "tab3") ? "active" : ""}&gt;&lt;a href="/#/contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I use the handleClick function to change the tabName:</p>

<pre><code>   handleClick(tabName, event) {
    this.setState ({activeTabClassName : tabName});
    //this.state.activeTabClassName = tabName;
  }
</code></pre>

<p>I also set the initial state of activeTabClassName as 'tab1' in my constructor:</p>

<pre><code>  constructor() {
    super();
    this.state = {activeTabClassName : "tab1"}; 
   // this.handleClick = this.handleClick.bind(this);
  }
</code></pre>

<p>The code for the whole Nav.js component</p>

<pre><code>import React from 'react';
export default class Nav extends React.Component {

  constructor() {
    super();
    this.state = {activeTabClassName : "tab1"}; 
  }

  handleClick(tabName, event) {
    this.setState ({activeTabClassName : tabName});
  }

  render(){
    return(
&lt;nav className="navbar navbar-default" role="navigation"&gt;
    &lt;div className="container-fluid"&gt;
    &lt;div className="navbar-header"&gt;
      &lt;button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
        &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span className="icon-bar"&gt;&lt;/span&gt;
        &lt;span className="icon-bar"&gt;&lt;/span&gt;
        &lt;span className="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a className="navbar-brand navbar-utimg" href="https://www.xxx.xxxx" target="_blank"&gt;
          &lt;img alt="logo" src="/dist/assets/coe-logo.png"/&gt;
      &lt;/a&gt;
    &lt;/div&gt;

    &lt;div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
      &lt;ul className="nav navbar-nav navbar-left"&gt;
        &lt;li onClick={event =&gt; this.handleClick('tab1', event)} className={(this.state.activeTabClassName === "tab1") ? "active" : ""}&gt;&lt;a href="#"&gt;HOME&lt;span className="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li onClick={event =&gt; this.handleClick('tab2', event)} className={(this.state.activeTabClassName === "tab2") ? "active" : ""}&gt;&lt;a href="/#/resources"&gt;RESOURCES&lt;/a&gt;&lt;/li&gt;
        &lt;li onClick={event =&gt; this.handleClick('tab3', event)} className={(this.state.activeTabClassName === "tab3") ? "active" : ""}&gt;&lt;a href="/#/contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;form className="navbar-form navbar-right" role="search"&gt;
        &lt;div className="form-group"&gt;
          &lt;input type="text" className="form-control" placeholder="Search"/&gt;
        &lt;/div&gt;
        &lt;button type="submit" className="btn btn-default"&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;/div&gt;
&lt;/nav&gt;
    )
  }
</code></pre>

<p>}</p>

<p>However, it does not work well. Everytime when click the tab, it does not highlight the selected tab unless I clicked it again. Why does the onClick function not change the state right away? Is there any better solution for this problem?</p>

<p>Thanks!</p>