Clever Geek Handbook

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


source to share


1 answer


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>
  }
})
+4


source






More articles:


All Articles