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>);});