title: React props for passing color
body: <p>I have many <code>div</code> elements with same size but with different colors. So I created a component 'Colors.jsx' in which I have the below code</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  
  function Colors(props) {
    return (
      &lt;div className=&quot;colors&quot; style={{backgroundColor: {props.color}}}&gt;&lt;/div&gt;
    );
  }
  
  export default Colors;
  </code></pre>
  <p>The problem is I'm getting these errors:</p>
  <blockquote>
  <p>/src/Colors.jsx: Unexpected token, expected &quot;,&quot; (6:59)<br />
  4 | function Colors(props) {<br />
  5 | return (<br />
  6 | &lt;div className=&quot;colors&quot; style={{backgroundColor: {props.color}}}&gt;<br />
  ^ 7 | );<br />
  8 | }<br />
  9 |</p>
  </blockquote>
  <blockquote>
  <p>4 | function Colors(props) {<br />
  5 | return (<br />
  6 | &lt;div className=&quot;colors&quot; style={{backgroundColor: {props.color}}}&gt;<br />
  ^ 7 | );<br />
  8 | }<br />
  9 |</p>
  </blockquote>
  <blockquote>
  <p>Parsing error: Unexpected token, expected &quot;,&quot;<br />
  4 | function Colors(props) {<br />
  5 | return (<br />
  6 | &lt;div className=&quot;colors&quot; style={{backgroundColor: {props.color}}}&gt;<br />
  ^ 7 | );<br />
  8 | }<br />
  9 | (null)</p>
  </blockquote>