RenderFactory.js

  /* ________ RENDER "FACTORY" ________
    -> lower level react methods allow more control over child rendering
    -> cloneElement is necessary to ensure immutability
    -> ugly but allows us to handle use-cases with one component or many
    -> cloneElement ensures referential equality & immutability :)
    -> ugly but allows us to handle use-cases with one child component or many
  */

  let elements = React.Children.toArray(props.children);
  if (elements.length === 1) {
    elements = React.cloneElement(elements[0], { className: 'top bottom' });
  } else if (elements.length > 0) {
    let lastElement = elements[elements.length - 1];
    elements = [React.cloneElement(elements[0], { className: 'top' })]
      .concat(elements.slice(1, -1))
      .concat(React.cloneElement(lastElement, { className: 'bottom' }));
  }