React - Cloning children with new props / passing props to children

cloneChildAndAddProps.ts

export interface PassThroughProps
{
	children: ReactElement
}


export function PassThrough( props: PassThroughProps )
{
	const { children, ...propsToPass } = props
	
	return React.Children
		.map( children, ( child: ReactElement ) =>
			React.cloneElement( child!, propsToPass ) ) // Clone element requires a single child
}


// Use:
<PassThrough
	waffles={true}
	pancakes="indeed"
>
	<ChildToInjectTo/>
</PassThrough>