Split commas in string to <br /> in JSX

Question

I have a string (an address) containing commas that I wish to delimit to line-breaks inside some JSX. Doing the following merely outputs the <br /> as a string:

{address.split(',').join('<br />')}

How can I do what I need to do, preferably retaining the commas?

Answer 1

You can try wrap each address in p tag and don't use <br />,

var Component = React.createClass({
    render: function() {
        var addresses = this.props.addresses.split(',').map(function (address, index) {
            return <p key={index}>{ address }</p>; 
        });

        return <div className="addresses">{addresses}</div>;
    }
});

Example

Answer 2

To delimit based on commas, turning commas into line-breaks, while "preferably retaining the commas" (not sure you meant you want to retain them in the output, but interpreting that as such) you can try the following (works for me):

let newAddress = address.split(',').map(line => <span>{line},<br/></span>);
// span tag here only in order for JSX to accept br tag

Answer 3

You can simply insert <br/> between the lines via reduce:

{address.split(',').reduce((all, cur) => [
  ...all,
  <br/>,
  cur
])}

Answer 4

Sometimes you want to use line breaks and not paragraphs. In that case, you can do:

function convertNewLines(_text) {
    let lines = _text.split('\n');
    let elements = [];
    for (let i=0; i<lines.length; i++) {
        elements.push(lines[i]);
        if (i < lines.length-1) {
            elements.push(<br key={i}/>);
        }
    }
    return elements;
}

This avoids the use of dangerously setting inner HTML.

(FWIW I figured this out by using the Babel REPL.)