Split commas in string to <br /> in JSX

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


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

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

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