Reactjs render JSX with dynamic text value

Question

I'm using ReactJS and I have the following problem that I can't find a solution to:

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 'JSX Gotchas'

let strReturn = "\u000A";//<br/>//\u000D

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

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

return <div className={this.props.className}>{str}</div>

Presently what is rendered to screen includes text of say Big<br/>Bid.

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

Many thanks in advance.

Oleksandr T. · Accepted Answer · 2016-07-05 11:25:19Z

4

There couple ways how you can solve this issue

use dangerouslySetInnerHTML

 let str = this.props.label.replace(/ /, '<br>');
 return <div dangerouslySetInnerHTML={ { __html: str} } />;

Example

split string and then wrap each line to tag, for instance <p>

 let text = this.props.label.split(/ /).map((text, index) => {
   return <p key={ index }>{ text }</p>
 });

<div>
  { text }
</div>;

Example

edited Jul 5, 2016 at 11:25

answered Jul 5, 2016 at 11:19

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Horia Coman · Accepted Answer · 2016-07-05 11:16:50Z

1

In this situation I'd actually go the route of being explicit with what you're trying to achieve, rather than relying on Unicode insertion tricks, or disabling escaping etc.

I would just split the string according to whitespace, and then, build a list of elements from it.

answered Jul 5, 2016 at 11:16

Horia Coman

8,8112 gold badges25 silver badges25 bronze badges

Collectives™ on Stack Overflow

Reactjs render JSX with dynamic text value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related