Color-Component that receives colors throw props and does color effect.

```
export enum Colors {
  Blue = "333CFF",
  Yellow = "FCFF33",
  Green = "33FF36",
}

interface IColorProps {
  myColors: Colors ;
}

export const ColorComponent: FunctionComponent<IColorProps > = ( {props: IColorProps } => {
    return (
    <div className={`colorCalss ${props.bgColor}`} />
 )});

```

ParentComponent that sends props to color-component

```
import { ColorComponent, Colors } from "ColorComponent.component";

export const ParentComponent: FunctionComponent<IParentComponentProps> =
(props: IParentComponentProps) => {

        <ColorComponent myColors={Colors.Blue}/>
}

```

The below is what I have placed into the IParentComponentProps

```
export enum Colors {
  Blue = "333CFF",
  Yellow = "FCFF33",
  Green = "33FF36",
}

interface IColorProps {
  myColors?: Colors ;
}

export interface IParentComponentProps {
  colors: IColorProps; 
}

```

I just started working with typescript.

The above Parent component sends props myColors to ColorComponent and its working I can see blue color being apply on my tests.

How can I send props dynamically to ColorComponent, for example lets say the parent.component props.color get different color that could be apply.

When I do something like: "<"ColorComponent myColors={props.colors}/">", I get error.

How can I get props pass down dynamically using enum?