Ever wanted to join react children like you join an array?

React Join Children

This file is only here to provide the title of the gist

example-component.jsx

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 } />
  }
}

react-join-children.js

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))
  }, [])
}

Thanks :)

Thanks :)

Whoa...somehow I never got any notifications on this until yours, @zachwolf. Oh the mortifying feeling when you find out other human beings have looked at a random thing that you wrote two years ago :P My style has evolved since then, but I think the concept stands the test of time.

Anyhow...glad I could help?

been searching for this for an hour. thanks so much

had to find it using site:gist.github.com

So, some years have passed, and now we have React fragments, which don't add any extra nodes to the DOM, so we can simply do:

      {things.map((thing, index) => (
        <>
          {index > 0 && <Separator />}
          <Thing />
        </>
      ))}

This is similar to @dinzy17's approach above, but it doesn't add an extra wrapper around each item (just for cases where you don't or can't add an extra wrapper).

@granmoe you need to assign a key prop to the fragments:

{list.map((item, index) => (
  <React.Fragment key={item.id}>
    {!!index && <Separator />}
    <Item item={item} />
  </React.Fragment>
))}

@granmoe you need to assign a key prop to the fragments:

{list.map((item, index) => (
  <React.Fragment key={item.id}>
    {!!index && <Separator />}
    <Item item={item} />
  </React.Fragment>
))}

Yep, good catch.

(This was just a hastily written example, but may as well not encourage poor practices 👍)

import React, { FunctionComponent, ReactNode } from 'react';

export const Separated: FunctionComponent<{ separator?: ReactNode }> = ({ children, separator = ' ' }) => {
  return (
    <>
      {React.Children.toArray(children)
        .reduce<ReactNode[]>((previousValue, currentValue) => {
          return [...previousValue, currentValue, separator];
        }, [])
        .slice(0, -1)}
    </>
  );
};