Reactjs, Inline-Style mit Zustandsdaten

Question

Ich habe ein Array von Wörtern auf die Schaltflächengruppe zugeordnet. und im Zustand habe ich einen Index und einen Farbwert

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

der Index und die Farbe sind in einer anderen Funktion eingestellt.

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

Wie kann ich die Farbe der indizierten Schaltfläche ändern?

Answer 1

Also, wenn Sie die Farbe der Schaltfläche mit dem Index === this.state ändern möchten. selectedWordIndex, der folgende Code sollte funktionieren.

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