title: reactjs - how to set inline style of backgroundcolor?
body: <p>I want to set the style properties of some elements but I don't have the syntax correct.  Can anyone suggest where I am wrong?</p>
  
  <pre><code>import React from 'react';
  import debug from 'debug'
  
  const log = debug('app:component:Header');
  
  var bgColors = { "Default": "#81b71a",
                      "Blue": "#00B1E1",
                      "Cyan": "#37BC9B",
                      "Green": "#8CC152",
                      "Red": "#E9573F",
                      "Yellow": "#F6BB42",
  };
  
  export default class SideBar extends React.Component {
  
    constructor(props) {
      super(props);
  
    }
  
  
    render() {
  
      return (
  
  
      &lt;a style="{{backgroundColor: {bgColors.Default}}}" &gt;default&lt;/a&gt;
      &lt;a style="{{backgroundColor: {bgColors.Blue}}}" &gt;blue&lt;/a&gt;
      &lt;a style="{{backgroundColor: {bgColors.Cyan}}}" &gt;cyan&lt;/a&gt;
      &lt;a style="{{backgroundColor: {bgColors.Green}}}" &gt;green&lt;/a&gt;
      &lt;a style="{{backgroundColor: {bgColors.Red}}}"  &gt;red&lt;/a&gt;
      &lt;a style="{{backgroundColor: {bgColors.Yellow}}}" &gt;yellow&lt;/a&gt;
             );
    }
  
  }
  </code></pre>
  
  <p>UPDATE: for anyone looking at this please see comments this is not working code.</p>