React sending props down using typescript - reactjs

Question

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?

Answer 1

Your parent interface should have the same color type:
export interface IParentComponentProps {
colors: Colors;
}
This way you will not get the type errors and can pass down the colors prop.
Or pass down the props.colors.myColors variable. But be careful it may not exists as you have it optional.

Answer 2

You don't need to do anything special to send the colors dynamically to the child. Specifically for typescript just make sure all types are consistent.
There's a couple of syntax errors on your example so maybe it's just not compiling for you because of that?
Here's a working sample where parent component dynamically changes the color and sends it to the child every second.
export enum Colors {
Blue = "333CFF",
Yellow = "FCFF33",
Green = "33FF36",
}
interface IColorProps {
color: Colors;
}
export const ColorComponent: React.FunctionComponent<IColorProps> = (props: IColorProps) => {
return <div style={{ backgroundColor: `#${props.color}`, height: '100px', width: '100px' }} />
};
const ParentComponent: React.FC = () => {
const colors = [Colors.Blue, Colors.Green, Colors.Yellow];
const [color, setColor] = React.useState(0);
const { current } = React.useRef({ next: function() { } });
current.next = () => {
const nextColor = (color === 2) ? 0 : (color + 1);
setColor(nextColor);
};
useEffect(
() => {
const interval = setInterval(() => current.next(), 1000);
return () => clearInterval(interval);
},
[]
);
return (
<>
<h1>Current color is #{colors[color]}</h1>
<ColorComponent color={colors[color]}/>
</>
);
}