Проблема с использованием функции карты в реакции на установку текста и цвета кнопок

Question

Мне хотелось бы иметь кнопки из массива с цветным текстом.Я использую ReactJS, и у меня есть этот код в моем app.js :

import React, { Component } from 'react';
import './App.css';

const myArray=["orange","red","yellow","green","blue","yellow"];

class App extends Component {
     render() {
          // this work
          const buttons=myArray.map((color,i)=><button key={i} style={color={color}}> my test </button> )

          //**// but this don't work**
         // const buttons=myArray.map((color,i)=><button key={i} style={color={color}}> {color} </button> )

          // and this work                          
          const buttons2=myArray.map((color,i)=><button  key={i}>{color}</button>)

           return (
                 <div>
                     <div>{buttons}</div>
                     <div>{buttons2}</div>  
                 </div>
               );
     }
}
export default App;

Когда я дважды использую {color}, это дает мне ошибку,Это почему?Может кто-нибудь объяснить мне?

Answer 1

Я думаю, что этот вопрос нашел хороший ответ @ MuratKaragöz

Answer 2

Ваши обе версии не должны работать.Вам необходимо определить style объект.Который должен выглядеть следующим образом

style={{color: color}}

с этим

const buttons = myArray.map((color, i) => <button key={i} style={{ color: color }}> {color} </button>)