Array.join for React children

Join.tsx

import React from 'react'

export function Join(props: { items: Array<React.ReactNode>; glue?: React.ReactNode; lastGlue?: React.ReactNode }) {
	const glue = props.glue ?? ', '
	const last = props.lastGlue ?? glue

	return (
		<>
			{props.items.map((item, i, list) => (
				<React.Fragment key={i}>
					{i > 0 && <React.Fragment key={-i}>{i === list.length - 1 ? last : glue}</React.Fragment>}
					{item}
				</React.Fragment>
			))}
		</>
	)
}

Co já vím, tak v novějším Reactu už je legit vracet z komponent rovnou pole.

Dříve

Nyní