Reactjs render JSX with dynamic text value
<p>I'm using ReactJS and I have the following problem that I can't find a solution to:</p>

<p>At the point just prior to render I would like to replace a space between two words with anything that will force a line break. So far everything I try doesn't work. I've read the React documentation which may be suggesting I'm dealing with a '<a href="https://facebook.github.io/react/docs/jsx-gotchas.html" rel="nofollow">JSX Gotchas</a>'</p>

<pre><code>let strReturn = "\u000A";//&lt;br/&gt;//\u000D

// for example this.props.label could have a value of "Big Bid"

//  now remove space between 'Big Bid' and replace with &lt;br/&gt;
let str = this.props.label.replace(/ /, strReturn );

return &lt;div className={this.props.className}&gt;{str}&lt;/div&gt;
</code></pre>

<p>Presently what is rendered to screen includes text of say Big<code>&lt;br/&gt;</code>Bid.</p>

<p>If there are any ReactJS pros that could show me the best way of dealing with this issue I'd be very grateful.</p>

<p>Many thanks in advance.</p>