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
])}