Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Ever wanted to join react children like you join an array?
This file is only here to provide the title of the gist
import React from 'react'
import joinChildren from 'react-join-children'
import { Item, Separator } from 'justanexample'
export default class MyComponent extends React.Component {
render () {
return <div>
{ joinChildren(this.props.items, this.renderItem, this.renderSeparator) }
</div>
// with 3 items, joinChildren returns [<Item>, <Separator>, <Item>, <Separator>, <Item>]
}
renderItem = (item, index) => {
return <Item key={ index } className="item" />
}
renderSeparator = key => {
return <Separator className="separator" key={ key } />
}
}
export default function (children, render, renderSeparator) {
return children.reduce((result, child, index) => {
if (index < children.length - 1) {
return result.concat([render(child, index), renderSeparator(index + '-separator')])
}
return result.concat(render(child, index))
}, [])
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment