const data = ["1","2","3","4","5","6"] // example data
const unicode = • // This is the unicode that I want to put in the jsx
<div>
{
data.map((item)=>(
item + <span>unicode</span>
))
}
</div>
But doesn’t work it displays [object Object]
I Tried (•)
, {"•"}
, <span>•</span>
, <span>{"•"}</span>
but none of them worked.
Any idea how I can use it unicode elements in JSX while mapping array?
>Solution :
Try 8226
code instead of •
. I got this code from https://www.toptal.com/designers/htmlarrows/punctuation/bullet/
Also, your JSX syntax is not correct.
import React from "react";
function App() {
const data = ["1","2","3","4","5","6"] // example data
const unicode = 8226; // unicode equivalent to •
return (
<div className="App">
<div>
{
data.map((item)=>(
<>{item} <span>{String.fromCharCode(unicode)}</span></>
))
}
</div>
</div>
);
}
export default App;
This is an example code which works as expected.