How to Use Unicode While Array Map in JSX REACT?

Advertisements
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 (&bull;) , {"&bull;"}, <span>&bull;</span>, <span>{"&bull;"}</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 &bull;. 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 &bull;

  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.

Leave a ReplyCancel reply