ReactJS render string with non-breaking spaces

Question

I have some props that has a string that could contain characters such as &. It also contains spaces. I want to replace all spaces with  .

Is there an easy way I can do this? Bear in mind that I cannot just render using this syntax:

<div dangerouslySetInnerHTML={{__html: myValue}} /> 

because I would first have to replace any HTML entities with their markup. I don't want to have to do this, it seems too low level.

Is there a way I can do this?

Answer 1

Instead of using the   HTML entity, you can use the Unicode character which   refers to (U+00A0 NON-BREAKING SPACE):

<div>{myValue.replace(/ /g, "\u00a0")}</div>