join-jsx.js

import React from "react";
import ReactDOM from "react-dom";

function App() {
  return (
    <div>
      <hr />
      {joinJSX(
        [
          <span key={3}>1</span>,
          <span key={1}>2</span>,
          <span key={2}>3</span>
        ],
        <hr />
      )}
      <hr />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

function joinJSX(components, separator) {
  const joined = [];
  for (
    let i = 0, l = components.length, c = components[i];
    i < l;
    ++i, c = components[i]
  ) {
    if (joined.length !== 0) {
      joined.push({ ...separator, key: separator.type + i }, c);
    } else {
      joined.push(c);
    }
  }

  return joined;
}