Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Compose Components.
import React from 'react';
const genContainer =
(name: string): React.FC =>
({ children }) =>
(
<div>
<h1>I'm {name}</h1>
<div style={{ paddingLeft: '10px' }}>{children}</div>
</div>
);
const Compose: React.FC<{
components: React.ComponentType[];
children: React.ReactElement;
}> = ({ children, components }) =>
components.reduceRight(
(Child, Parent) => (
<>
<Parent>{Child}</Parent>
</>
),
children,
);
export default () => {
return (
<Compose
components={['parent1', 'parent2', 'parent3', 'parent4'].map((name) => genContainer(name))}
>
<h1>Bingo!</h1>
</Compose>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment