Recompose

demo-6.js

import React from 'react';
import { conenct } from 'react-redux';
import { compose, lifecycle, branch, renderComponent, withProps, withState } from 'recompose';

import { loadCampers } from 'redux/campers/actions';

const enhance = compose(
  connect(
    state => ({
      campers: state.campers.lists
    }),
    { loadCampers }
  ),
  branch(props => props.loading, renderComponent(Loader)),
  withState('displayRole', 'setDisplayRole', 'design'),
  withProps(
    props => ({
      design: props.campers.filter(camper => camper.role === 'design'),
      marketing: props.campers.filter(camper => camper.role === 'marketing'),
      programming: props.campers.filter(camper => camper.role === 'programming'),
      content: props.campers.filter(camper => camper.role === 'content'),
    })
  ),
  lifecycle({
    componentDidMount() {
      this.props.loadCampers();
    }
  })
);

const Campers = props => {
  const { design, marketing, programming, content, displayRole, setDisplayRole } = props;
  return (
    <div>
      <button onClick={() => setDisplayRole('design')}>Design</button>
      <button onClick={() => setDisplayRole('Marketing')}>Marketing</button>
      <button onClick={() => setDisplayRole('Programming')}>Programming</button>
      <button onClick={() => setDisplayRole('Content')}>Content</button>
      {displayRole === 'design' && <CamperTable lists={design} />}
      {displayRole === 'marketing' && <CamperTable lists={marketing} />}
      {displayRole === 'programming' && <CamperTable lists={programming} />}
      {displayRole === 'content' && <CamperTable lists={content} />}
    </div>
  );
};

export default enhance(Campers);