Recompose Checkbox

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.js"></script>
<script src="https://npmcdn.com/[email protected]/build/Recompose.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
 
<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const { compose, mapProps, withState, withHandlers } = 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(
    withState('selectedItemsLookup', 'setSelectedItems', new Set()),
    withHandlers({
        toggleSelection,
    })
);

const Enhanced = enhance(({ items, toggleSelection, selectedItemsLookup }) => (
    <ul>
        {items.map(item => (
            <li key={item.id}>
                <label>
                    <input type="checkbox"
                      checked={selectedItemsLookup.has(item.id)}
                      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'));