is there a way to do array.join in react [duplicate] - arrays

Question

This question already has answers here:
How to render react components by using map and join?
(18 answers)
Closed 10 months ago.
I'd like to inject a separator between each element of an array using an array.join-like syntax.
Something like the following:
render() {
let myArray = [1,2,3];
return (<div>
{myArray.map(item => <div>{item}</div>).join(<div>|</div>)}
</div>);
}
I've got it working using a lodash.transform approach, but it feels ugly, I'd like to just do .join(<some-jsx>) and have it insert a separator in between each item.

Answer 1

You can also use reduce to insert the separator between every element of the array:
render() {
let myArray = [1,2,3];
return (
<div>
{
myArray
.map(item => <div>{item}</div>)
.reduce((acc, x) => acc === null ? [x] : [acc, ' | ', x], null)
}
</div>
);
}
or using fragments:
render() {
let myArray = [1,2,3];
return (
<div>
{
myArray
.map(item => <div>{item}</div>)
.reduce((acc, x) => acc === null ? x : <>{acc} | {x}</>, null)
}
</div>
);
}

Answer 2

You can also do it by combining .reduce and React fragments.
function jsxJoin (array, str) {
return array.length > 0
? array.reduce((result, item) => <>{result}{str}{item}</>)
: null;
}
function jsxJoin (array, str) {
return array.length > 0
? array.reduce((result, item) => <React.Fragment>{result}{str}{item}</React.Fragment>)
: null;
}
const element = jsxJoin([
<strong>hello</strong>,
<em>world</em>
], <span> </span>);
ReactDOM.render(element, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

Trying to .join with React Elements is probably not going out pan out for you. This would produce the result you describe needing.
render() {
let myArray = [1,2,3];
return (
<div>
{myArray.map((item, i, arr) => {
let divider = i<arr.length-1 && <div>|</div>;
return (
<span key={i}>
<div>{item}</div>
{divider}
</span>
)
})}
</div>
);
}

Answer 4

Using Array.map and React.Fragment you can join each array item with any JSX element you want. In the example below I'm using a <br /> tag but this can be substituted for whatever element you want.
const lines = ['line 1', 'line 2', 'line 3'];
lines.map((l, i) => (
<React.Fragment key={i}>{l}{i < (lines.length - 1) ? <br /> : ''}</React.Fragment>
));
The output would be
line 1 <br />
line 2 <br />
line 3

Answer 5

Btw. you can also supply functions to react. My approach would be .forEach pairs of push(value); push(glue);, and afterwards pop() the trailing glue...
function() {
joinLike = [];
originData.forEach(function(v,i) {
joinLike.push(v);
joinLike.push(<br>);
})
joinLike.pop();
return joinLike;
}

Answer 6

To produce the requested solution, in React join doesn't seem to work so with map and reduce you can do it like this:
render() {
let myArray = [1, 2, 3];
return (
<div>
{myArray
.map(item => <div>{item}</div>)
.reduce((result, item) => [result, <div>|</div>, item])}
</div>
);
}

Answer 7

You could also try flatMap(). Browser support is coming, but until then you could use a polyfill. Only downside is you'd have to lose the last element.
Eg.
{myArray.flatMap(item => [<div>{item}</div>, <div>|</div>]).slice(0, -1)}
Or
{myArray.flatMap((item, i) => [
<div>{item}</div>,
i < myArray.length - 1 ? <div>|</div> : null
])

Answer 8

You can use a function like this one
function componentsJoin(components, separator) {
return components.reduce(
(acc, curr) => (acc.length ? [...acc, separator, curr] : [curr]),
[]
);
}
Or can use a package, found this one
https://www.npmjs.com/package/react-join

Answer 9

If you are using TypeScript, you can simply copy this file and use jsxJoin:
import { Fragment } from "react";
/**
* Join together a set of JSX elements with a separator.
*
* #see https://stackoverflow.com/q/33577448/5506547
*/
function jsxJoin(components: JSX.Element[], separator: any) {
// Just to be sure, remove falsy values so we can add conditionals to the components array
const filtered = components.filter(Boolean);
return filtered.length === 0
? null
: (filtered.reduce(
(acc, curr, i) =>
acc.length
? [
...acc,
// Wrap the separator in a fragment to avoid `missing key` issues
<Fragment key={i}>{separator}</Fragment>,
curr
]
: [curr],
[]
) as JSX.Element[]);
}
export { jsxJoin };

Answer 10

// typescript
export function joinArray<T, S>(array: Array<T>, separator: S): Array<T | S> {
return array.reduce<(T | S)[]>((p, c, idx) => {
if (idx === 0) return [c];
else return [...p, separator, c];
}, []);
}
// javascript
export function joinArray(array, separator) {
return array.reduce((p, c, idx) => {
if (idx === 0)
return [c];
else
return [...p, separator, c];
}, []);
}
// example
console.log(joinArray(["1", "2", "3"], 2));
// -> ["1", 2, "2", 2, "3"]
// example
// privacyViews -> JSX.Element[]
const privacyViews = joinArray(
privacys.value.map(({ key, name }) => {
return (
<button onClick={() => clickPrivacy(key!)} class={Style.privacyBtn}>
{name}
</button>
);
}),
<span class={Style.privacyBtn}>、</span>
);

Answer 11

This will cover all cases
const items = []
if(x1) {
items.push(<span>text1</span>)
}
if(x2) {
items.push(<span>text3</span>)
}
if(x3) {
items.push(<span>text3</span>)
}
return <div>
<>{items.reduce((result, item) => result.length > 0 ? [...result, ', ', item] : [item], [])}</>
</div>