How To Change Active tabs Color in reactjs with dynamically

Question

• I want to change Active tab color on dynamic tabs

  this is my code..

    this.state={
               tab:[{id:1,tab:'Member'},{id:2,tab:'Request'},{id:3,tab:'Send-Request'},{id:4,tab:'Block'},{id:5,tab:'Search'}],
              active:'nav-link ',
            }
       }  btnClick=ind=>e=>{
          console.log(ind);
            this.state.tab.map((tab1,idx)=>{
               if(ind===idx){
                   this.setState({
                       active:'nav-link active'
                           })
                       }  })
       }
       render(){

          <div className="box bg-transparent">
              <div className="box-body padding-0">
                  <div className="nav nav-pills" id="v-pills-tab" 
                     role="tablist">                                            
            {this.state.tab.map((tab,ind)=>(

           <a onClick={this.btnClick(ind)} className={this.state.active} id="v-pills-member-tab" data-toggle="pill" href="#" role="tab"
   aria-controls="v-pills-member" aria-selected="true">{tab.tab}</a>

             ))}
          </div> 
       </div>  
</div>

Members Request Send-Request Block Search

Result Of Tabs

Answer 1

Try className as

className={ tab.id === this.state.activeTab.id ? 'nav-link active' : '' }

Also, onBtnClick, use the method below

onBtnClick(index) {
    this.setState({
        activeTab: this.state.tab[index]
    });
}