I have many div elements with same size but with different colors. So I created a component '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)