Jack Allan Jack Allan - 7 months ago 12
HTML Question

ReactJS render string with non-breaking spaces

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

Instead of using the &nbsp; HTML entity, you can simply use the Unicode non-breaking space character:

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