Cacher is the code snippet organizer for pro developers

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

const starWarsChars = [
  { name: 'Luke', side: 'light' },
  { name: 'Darth Vader', side: 'dark' },
  { name: 'Obi-wan Kenobi', side: 'light' },
  { name: 'Palpatine', side: 'dark' }
];

const renderDisplayList = ({ list, handleSetState }) => (
   <div>
      <button onClick={handleSetState}>Switch</button>
      {list.map(char =>
         <div key={char.name}>
            <div>Character: {char.name}</div>
            <div>Side: {char.side}</div>
         </div>
      )}
   </div>
)

const enhance = compose(
   withState('stateValue', 'stateHandler', 'dark'),
   mapProps(({ list, stateValue, stateHandler }) => {
      const otherSide = stateValue === 'dark' ? 'light' : 'dark'
      return {
         stateHandler,
         otherSide,
         list: list.filter(char => char.side === stateValue),
      }
   }),
   withHandlers({
      handleSetState: ({ stateHandler, otherSide }) => () => stateHandler(otherSide)
   })
)

const FilteredList = enhance(renderDisplayList)

ReactDOM.render (
   <FilteredList list={starWarsChars} />,
   document.getElementById('app')
)

// Articles series
// https://codinglawyer.net/index.php/2018/02/14/introducing-higher-order-components/
// recompose API
// https://github.com/acdlite/recompose/blob/master/docs/API.md