Inward React Nesting

react-inward.js

const { cloneElement } = React

const plopProps = plops => (
  props => (
    inward => (
      plops(props)
        ? cloneElement(plops(props), props, (plops(props).props.children || []).concat(inward.plops(props)))
        : inward.plops(props)
    )
  )
)

const Inward = plops => {
  return {
    plops,
    concat: inward => Inwardprops => plopProps(plops)(props)(inward))
  }
}

const plopReducer = (acc, x) => acc.concat(x)

const Name = ({ name }) => <span>{name} really enjoys </span>
const Activity = ({ activity }) => <em>{activity}.</em>
const App = [Name, Activity]
  .map(Inward)
  .reduce(plopReducer, Inward(_ => null))
  .plops

ReactDOM.render(
  <App 
    name="Fred Estaircase" 
    activity="eating dolphins" 
   />,
  document.getElementById('container')
)