React props for passing color

Question

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)

Answer 1

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>

Answer 2

Remove the brackets around props.color like this. Add the children to use your component 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>