Jack Allan Jack Allan - 2 years ago 148
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 Source

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

<div>{myValue.replace(/ /g, "\u00a0")}</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download