Recompose

demo-1.js

import React from 'react';

const Campers = props => {
  const { campers = [] } = props;
  return (
    <div>
      <CamperTable lists={campers.filter(camper => camper.role === 'design')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'marketing')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'programming')} />
      <CamperTable lists={campers.filter(camper => camper.role === 'content')} />
    </div>
  );
};

export default Campers;