I've got a situation where I have several labels, with separator arrows in between them - sort of like breadcrumbs.
The last label has no arrow after it.
This seems like a perfect situation for .join(), for example:
[1,2,3,4].join('->'); // "1->2->3->4"
But, the labels are JSX, and the join delimiter is JSX as well.
Since .join() expects a string delimiter and converts array elements to strings, it ends up like this:
[<div />, <div />].join(<hr />); // "[object Object][object Object][object Object]"
I've explored the .reduce() solution detailed in other answers but it doesn't seem to work quite right either. Does anyone have any tips?