Faq
- How to join array of JSX
- How to array join of React Elements
JSX Array Join Javascript Function
function jsxJoin(array, separator) {
return array.length > 0
? array.reduce((result, item) => (
<>
{result}
{separator}
{item}
</>
))
: null
}
Array JSX Join Typescript Function
function jsxJoin(array: JSX.Element[], separator: string | JSX.Element) {
return array.length > 0
? array.reduce((result, item) => (
<>
{result}
{separator}
{item}
</>
))
: null
}
Array JSX Join With Validation
function array_jsx_join(
arr: JSX.Element[],
delimeter?: JSX.Element | string
): JSX.Element {
if (!Array.isArray(arr) || arr.length === 0)
return <>[array_jsx_join] empty array</>
let delim: JSX.Element = <br />
if (typeof delimeter === 'string') {
delim = <span>{delimeter}</span>
} else if (typeof delimeter !== 'undefined') {
delim = delimeter
}
return arr.reduce((prev, curr) => (
<>
{prev}
{delim}
{curr}
</>
))
}
Usage Example
jsxJoin([<div>first jsx snippet</div>, <div>second jsx snippet</div>, <div>third jsx snippet</div>])
Source Idea