Utilities to join and clone React children.

clone-children.js

/**
 * Used to clone and apply props to children
 */
function cloneChildren(children, callback) {
  const childrenArray = React.Children.toArray(children).filter(
    child => child !== undefined && child !== null && child !== false
  )
  const childrenCount = childrenArray.length
  return childrenArray.map(
    (child, index) =>
      typeof child === 'string' ||
      typeof child === 'number'
        ? child
        : cloneElement(
            child,
            callback(child, {
              index,
              childrenCount,
              firstChild: index === 0,
              lastChild: index === Math.max(0, childrenCount - 1),
              isEven: index % 2 === 0,
              isOdd: Math.abs(index % 2) === 1,
            })
          )
  )
}

join-children.js

/**
 * Joins React children using a separator.
 */
function joinChildren(children, separator = ', ') {
  const childrenArray = React.Children.toArray(children)
  const lastChildIndex = childrenArray.length - 1
  return childrenArray.reduce((result, child, index) => {
    if (index < lastChildIndex) {
      return result.concat([
        child,
        typeof separator === 'string'
          ? separator
          : cloneElement(separator, { key: index + '-separator' }),
      ])
    } else {
      return result.concat(child)
    }
  }, [])
}