const ComponentA = props => {
  return props.children({
    name: props.name.toUpperCase()
  })
}
 
const ComponentB = props =>
  props.children({
    name: props.name.big()
  })
 
 
const ComponentC = props => {
  return props.children({
    name: props.name.repeat(3)
  })
}
 
const Folder = folder([
  (result, render) => (
    <ComponentA name={'⒜' + result.name + '⒜'} children={render} />
  ),
  (result, render) => (
    <ComponentB name={'⒝' + result.name + '⒝'} children={render} />
  ),
  (result, render) => (
    <ComponentC name={'⒞' + result.name + '⒞'} children={render} />
  )
])
 
// Usage
const MyComponent = (props) => (
  <div>
    <Folder name="thing">{r => <pre>{JSON.stringify(r)}</pre>}</Folder>
  </div>
)