I want to pass props to Elements from Blocks without explicitly passing them

[umerjaved178]

I am using react with the following functional approach

`
const Divider: React.FunctionComponent = ({children}) => (

// I want to use color props here of Card divider {children}

);

const Card: React.FunctionComponent = ({children, color}) => {
const color = props.color

return(

card {children}

)}

Card.Divider = Divider;
`

and I call these components as following

<Card color="red"> <Card.Divider> Any text <Card.Divider/> <Card />

The problem is: How can I get the color props in the Divider component

PS: I don't want to repeat props passing again for divider like following
<Card color="red"> <Card.Divider color="red"> Any text <Card.Divider/> <Card />
What I want is the following approach and can still able to use color props in Divider component, how can I do that

<Card color="red"> <Card.Divider> Any text <Card.Divider/> <Card />

[umerjaved178]

Github is having some errors whole displaying a block of code, you can see the issue here
https://stackoverflow.com/questions/71758307/how-can-i-pass-props-to-inner-react-component-using-functional-approach