Как изменить цвет активных вкладок в динамически с

Question

• Я хочу изменить цвет активной вкладки на динамических вкладках

  это мой код ..

    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>

Члены запроса Поиск блока запроса на отправку

Результат вкладок

Answer 1

Попробуйте имя_класса как

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

Также на onBtnClick используйте метод ниже

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