Join JSX with JSX

Question

Join JSX with JSX

I have a situation where I have multiple marks with dividing arrows between them - sort of like bread crumbs.

The last label after it has no arrow.

This looks like an ideal situation for .join()

, for example:

[1,2,3,4].join('->');  // "1->2->3->4"

But the shortcuts are JSX and the connection separator is JSX.

Since it .join()

expects a string separator and converts the array elements to strings, it ends up like this:

[<div />, <div />].join(<hr />); // "[object Object][object Object][object Object]"

I've researched the solution .reduce()

detailed in other answers , but it doesn't seem to work quite correctly. Anyone have any hints?

+3

javascript reactjs jsx

Ben 06 jul. 17 at 21:50

source to share

1 answer

Tal Avissar · Accepted Answer · 2017-07-06T21:59:16+0000

Here's a good way you can solve with a shortcut:

React.createClass({
  render() {
     <div>
        this.props.data
        .map(t => <div/>)
        .reduce((accu, elem) => {
            return accu === null ? [elem] : [...accu, <hr />, elem]
        }, null)
     </div>
  }
})

Join JSX with JSX

More articles: