html - reactjsでアクティブなタブの色を動的に変更する方法

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>

メンバー リクエスト送信リクエスト ブロック検索

タブの結果