Reactjs、状態データ付きインラインスタイル

Question

ボタングループに単語の配列をマップしました。インデックスと色値を持っている状態で

this.state = { 
      selectedWordIndex:'', //e.g. 3 
      selectedWordColor:'' //e.g. rgb(137,197,8) 
     } 

インデックスと色は別の機能に設定されています。

var counter = -1; 
return this.state.sentenceArray.map((word) => { 
     counter += 1 
     return (
      <button 
       key={counter} 
       type="button" 
       className="btn btn-default" 
       style={{}}>{word}</button>);}); 

インデックスボタンの色を変更するにはどうすればよいですか？

Answer 1

したがって、インデックス=== this.stateでボタンの色を変更したい場合は、 selectedWordIndex、次のコードは動作するはずです。

var counter = -1; 
return this.state.sentenceArray.map((word) => { 
     counter += 1 
     return (
      <button 
       key={counter} 
       type="button" 
       className="btn btn-default" 
       style={ this.state.selectedWordIndex === counter ? 
         { color:this.state.selectedWordColor } : 
         {} 
         } 
      >{word}</button>);});