Recompose Base Fiddle

Starting point for creating JSFiddles with Recompose. Forked from React Base Fiddle.

by wuct

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react.min.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.min.js"></script>
<script src="https://npmcdn.com/recompose@latest/build/Recompose.js"></script>
<script src="https://npmcdn.com/@reactivex/rxjs/dist/global/Rx.umd.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

import React from 'react';
import ReactDOM from 'react-dom';
import { compose, mapProps, withState, withHandlers } from 'recompose';

const toggleSelection = ({ setSelectedItems }) => (event, item) => {
    event.preventDefault();

    setSelectedItems(old => {
        const selection = new Set(old);

        if (selection.has(item.id)) {
            selection.delete(item.id);
        } else {
            selection.add(item.id);
        }

        return selection;
    });
};

const enhance = compose(
    mapProps(({ items }) => ({ items })),
    withState('selectedItemsLookup', 'setSelectedItems', new Set()),
    withHandlers({
        toggleSelection,
    }),
);

const Enhanced = enhance(({ items, toggleSelection }) => (
    <ul>
        {items.map(item => (
            <li key={item.id}>
                <label>
                    <input type="checkbox" onClick={e => toggleSelection(e, item)}/>
                    <span>{item.name}</span>
                </label>
            </li>
        ))}
    </ul>
));

ReactDOM.render(<Enhanced items={[{ id: 'item1', name: 'Item 1' }, { id: 'item2', name: 'Item 2' }]}/>, document.getElementById('root'));