title: Problem with use of map function in react for setting text and color of buttons
body: <p>I will like to have buttons from array with colored text. 
  I use ReactJS and I have this code in my <em>app.js</em> :</p>
  
  <pre><code>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)=&gt;&lt;button key={i} style={color={color}}&gt; my test &lt;/button&gt; )
  
            //**// but this don't work**
           // const buttons=myArray.map((color,i)=&gt;&lt;button key={i} style={color={color}}&gt; {color} &lt;/button&gt; )
  
            // and this work                          
            const buttons2=myArray.map((color,i)=&gt;&lt;button  key={i}&gt;{color}&lt;/button&gt;)
  
             return (
                   &lt;div&gt;
                       &lt;div&gt;{buttons}&lt;/div&gt;
                       &lt;div&gt;{buttons2}&lt;/div&gt;  
                   &lt;/div&gt;
                 );
       }
  }
  export default App;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/kSJ6B.png" alt="Screenshot of app"></p>
  
  <p>When I use <code>{color}</code> twice it gives me an error. Why is that? Can someone explain to me?</p>