title: How to make a tab active when it is clicked on in React
body: <p>Good day,
  I'm trying to write code to make a tab active when it is clicked on in my React App with Bootstrap. I had previously set only the Home Tab to be active but now I want to change the code. Please how do I go about this? I am new to React.</p>
  <pre><code>/* eslint-disable jsx-a11y/anchor-is-valid */
  import React, { Component } from 'react';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faCoffee, faCut } from '@fortawesome/free-solid-svg-icons';
  
  class Counter extends Component {
      state = {
          count: this.props.value,
          tabs:[&quot;Home&quot;,&quot;About&quot;,&quot;Contact&quot;,&quot;FAQ&quot;]
      };
  
      assets={
          images:{
              image1:&quot;images/la.jpg&quot;,
              image2:&quot;images/chicago.jpg&quot;,
              image3:&quot;images/ny.jpg&quot;
          },
          font:{
              font1:&quot;Roboto&quot;,
              font2:&quot;sans-serif&quot;,
              font3:&quot;Verdana&quot;
          },
          styles:{
              fontSize:12,
              fontWeight:'bold',
              fontColor:'whitesmoke'
              
          },
          imgstyle:{
              borderRadius:&quot;50%&quot;,
              width:&quot;100px&quot;,
              height:&quot;100px&quot;,
              marginTop:&quot;10px&quot;
          }
      }
  
      formatCount=()=&gt;{
          const count=this.state.count;
          return count===0?&quot;Zero&quot;:count;
      };
      handleIncrement=()=&gt;{
          this.setState({count:this.state.count + 1})
      };
      styles={
          fontSize:15,
          fontWeight:&quot;bold&quot;
          
      }
      renderTags=()=&gt;{
          return(
              &lt;nav className=&quot;nav nav-tabs&quot;&gt;
                  {this.state.tabs.map(tab=&gt;(
                  &lt;a href=&quot;#&quot; key={tab} className={this.activeNav(tab)}&gt;
                      {tab}
                  &lt;/a&gt;
                  ))}
              &lt;/nav&gt;
              );
      };
      formatBadge=()=&gt;{
          let classes=&quot;badge m-2 badge-&quot;;
          classes+=this.state.count===0?&quot;warning&quot;:&quot;success&quot;;
          return classes;
      };
  
  /*MAKES HOME TAB ACTIVE*/
     activeNav=(navlink)=&gt;{
      if (navlink===&quot;Home&quot;){
          return &quot;nav-item nav-link active&quot;}
      else{
          return &quot;nav-item nav-link&quot;}
      };
  
      render() {
          console.log('props',this.props.value)
          return (
              &lt;div&gt;
                  &lt;span style={this.styles} className={this.formatBadge()}&gt;
                      {this.formatCount()}
                  &lt;/span&gt;
                  &lt;button onClick={this.handleIncrement} className=&quot;btn btn-sm btn-secondary m-2&quot;&gt;&lt;FontAwesomeIcon icon={faCoffee} className=&quot;mr-2&quot;/&gt;Increment&lt;/button&gt;
                  
                  
                  &lt;button className=&quot;btn btn-danger btn-sm m-2&quot; onClick={()=&gt;this.props.deleteThis(this.props.id)}&gt;&lt;FontAwesomeIcon icon={faCut} className=&quot;mr-2&quot;/&gt;Delete&lt;/button&gt;
                  &lt;img style={this.assets.imgstyle} src={this.assets.images.image1} alt=&quot;&quot;/&gt;
                  {this.renderTags()}
                  
              &lt;/div&gt;
          );
      }
  
  }
  
  export default Counter;
  </code></pre>
  <p>Any help regarding this would be appreciated. Thank you.</p>
  <p><a href="https://i.stack.imgur.com/6QsEs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6QsEs.png" alt="Code output" /></a></p>