Join array with svg in jsx - reactjs

Question

I perform the following with jsx
import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Img } from "./4ddd.svg";
import "./styles.css";
function App() {
return <div className="App">{[1, 2, 3].join(<Img />)}</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This gives
The desired output is
What is the right way to join the array with svg icon?
Please see the code at codesandbox

Answer 1

join is expecting string join, but you're using a component, so that's why it shows [object Object]. You can do it with reduce instead
Sandbox
import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Img } from "./4ddd.svg";
import "./styles.css";
function App() {
return <div className="App">{[1, 2, 3].reduce((current, value) => [current, <Img/>, value])}</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

I suggest you to use map instead of join in this way:
return (
<div className="App">
{[1, 2, 3].map((x) => (
<div className="Align">
{x}
{x !== [1, 2, 3].length && <Img />}
</div>
))}
</div>
);
And a little bit of css to keep all aligned:
.Align {
display: inline-block;
}
Here your codesandbox modified.

Answer 3

Another way:
import React from "react";
import ReactDOM from "react-dom";
import { ReactComponent as Img } from "./4ddd.svg";
import "./styles.css";
function App() {
const numberArr = [1, 2, 3];
return (
<div className="App">
{numberArr.map((item, index) => (
<>
{item}
{index < numberArr.length - 1 && <Img />}
</>
))}
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here code: https://codesandbox.io/s/stupefied-drake-db64xk?file=/src/index.js:0-477