Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to Use Unicode While Array Map in JSX REACT?

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading