Composable Components with IC

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';

window.onload = () => ReactDOM.render(<App />, document.body);

class App extends React.Component {
    render() {
        const pid = 999;

        const ProductClosure = makeProductClosure({
            ProductThumbnail,
            ProductEditor
        });

        return <main>
            <header>Customize Product</header>
            <ProductClosure productId={pid}>{C =>
                <div>
                    <C.ProductThumbnail />
                    <C.ProductEditor />
                </div>
            }</ProductClosure>
        </main>
    }
}

const makeProductClosure = types => ({
    productId,
    children
}) => children(Object.assign({},
    ...Object.entries(types).map(([name, Component]) => ({
        [name]: ({children, ...props}) =>
            <Component productId={productId} {...props}>
                {children}
            </Component>
    }))
));

const ProductThumbnail = ({ productId }) =>
    <div className="product-thumbnail">
        <span data-product-id={productId} />
    </div>;

const ProductEditor = ({ productId }) =>
    <div className="product-editor">
        <span data-product-id={productId} />
    </div>;