Skip to content

Instantly share code, notes, and snippets.

@granmoe
Last active December 7, 2022 14:50
Show Gist options
  • Save granmoe/274c299b792b039deecfb619753ea32c to your computer and use it in GitHub Desktop.
Save granmoe/274c299b792b039deecfb619753ea32c to your computer and use it in GitHub Desktop.
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))
}, [])
}
@basith374
Copy link

been searching for this for an hour. thanks so much

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

@granmoe
Copy link
Author

granmoe commented Oct 2, 2020

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).

@j-hannes
Copy link

j-hannes commented Jun 24, 2021

@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
Copy link
Author

granmoe commented Jun 24, 2021

@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 👍)

@benkeil
Copy link

benkeil commented Dec 7, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment