SpaceAce-subSpaces.jsx

const handleRemove = ({ merge, space }, itemToBeRemoved) => {
  merge({ 
    items: space.items.filter(item => item !== itemToBeRemoved)
  });
};

export const ShoppingCart = ({ space }) => (
  <div>
    <ul>
      {space.items.map(item => (
        <li key={item.uuid}>
          <CartItem 
            space={item} 
            onRemove={space(handleRemove).bind(null, item)} 
           />
        </li>
      )}
    </ul>
  </div>
);

const CartItem = ({ space, onRemove }) => (
  <div>
    <strong>{space.name}</strong>
    <input 
      type="number" 
      min="0" 
      max="10" 
      onChange={space('count')}
      value={space.count} 
     />
    <button onClick={onRemove}>Remove</button>
  </div>
);