Question 74452 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to Use Unicode While Array Map in JSX REACT? – Reactjs

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    "Unicode" and Named HTML Character Entities aren’t the same thing. &bull; is a named character entity for Unicode code point U+2022. To write a unicode code point in JavaScript (for instance, in a string you’re going to use later), you can use a Unicode code unit escape (u2022) if it fits in one unit (or a pair of them if you want to manually write a surrogate pair), or a Unicode code point escape for any Unicode code point (u{2022}).

    Separately, JSX fragments aren’t strings, you can’t concatenate them with +. To write a series of fragments all together, you can wrap them in a <React.Fragment>___</React.Fragment> (more commonly, the shorthand: <>___</>).

    Here’s an example making unicode a string:

    const data = ["1", "2", "3", "4", "5", "6"];
const unicode = "u{2022}";
return (
    <div>
        {data.map((item) => (
            <>
                {item}<span>{unicode}</span>
            </>
        ))}
    </div>
);

    const Example = () => {
    const data = ["1", "2", "3", "4", "5", "6"];
    const unicode = "u{2022}";
    return (
        <div>
            {data.map((item) => (
                <React.Fragment>
                    {item}<span>{unicode}</span>
                </React.Fragment>
            ))}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);
    <div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

    Here’s an example making unicode a fragment around &bull;:

    const data = ["1", "2", "3", "4", "5", "6"];
const unicode = <>&bull;</>;
return (
    <div>
        {data.map((item) => (
            <React.Fragment>
                {item}<span>{unicode}</span>
            </React.Fragment>
        ))}
    </div>
);

    const Example = () => {
    const data = ["1", "2", "3", "4", "5", "6"];
    const unicode = <React.Fragment>&bull;</React.Fragment>;
    return (
        <div>
            {data.map((item) => (
                <React.Fragment>
                    {item}<span>{unicode}</span>
                </React.Fragment>
            ))}
        </div>
    );
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);
    <div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

    Note: The Stack Snippets above use the long form of React.Fragment because the version of Babel in Stack Snippets is so old it doesn’t understand the shorthand syntax. One of many problems with Stack Snippets that SE Inc. has been ignoring for years.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search