I have many div elements with same size but with different colors. So I created a ponent 'Colors.jsx' in which I have the below code

import React from "react";
import "./styles.css";

function Colors(props) {
  return (
    <div className="colors" style={{backgroundColor: {props.color}}}></div>
  );
}

export default Colors;

The problem is I'm getting these errors:

/src/Colors.jsx: Unexpected token, expected "," (6:59)
4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

Parsing error: Unexpected token, expected ","
4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 | (null)

I have many div elements with same size but with different colors. So I created a ponent 'Colors.jsx' in which I have the below code

import React from "react";
import "./styles.css";

function Colors(props) {
  return (
    <div className="colors" style={{backgroundColor: {props.color}}}></div>
  );
}

export default Colors;

The problem is I'm getting these errors:

/src/Colors.jsx: Unexpected token, expected "," (6:59)
4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 |

Parsing error: Unexpected token, expected ","
4 | function Colors(props) {
5 | return (
6 | <div className="colors" style={{backgroundColor: {props.color}}}>
^ 7 | );
8 | }
9 | (null)

• javascript
• css
• reactjs
• react-props

• 1 style={{backgroundColor: props.color}} – arslan2012 Commented Sep 9, 2020 at 7:48
• 1 {{backgroundColor: {props.color}}} ----> {{backgroundColor: props.color}} – Yousaf Commented Sep 9, 2020 at 7:48

2 Answers 2

The issue is here:

<div className="colors" style={{backgroundColor: {props.color}}}></div>

You need to do like this(remove extra currly braces):

<div className="colors" style={{backgroundColor: props.color}}></div>

Remove the brackets around props.color like this. Add the children to use your ponent clearly

function Colors(props) {
  return (
    <div className="colors" style={{backgroundColor: props.color}}>{props.children}</div>
  );
}

Then call it like that

<Colors color="#765739">Hello</Colors>