newlines character ignored by jsx table
You've got a few options:
1) Use a block level element such as div
or a p
and wrap each line.
var TextLines = React.createClass({
render: function() {
var lines = this.props.lines;
var formatted = lines.map(function(line) {
return (<p>{line}</p>);
});
return (<div>{ formatted }</div>);
}
});
var lines = ['line 1', 'line 2', 'line 3'];
React.render(<TextLines lines={ lines }/>,
document.getElementById('container'));
2) Use a span with a br
element:
var TextLines = React.createClass({
render: function() {
var lines = this.props.lines;
var br = lines.map(function(line) {
return (<span>{line}<br/></span>);
});
return (<div>{ br }</div>);
}
});
var lines = ['line 1', 'line 2', 'line 3'];
React.render(<TextLines lines={ lines } />,
document.getElementById('container'));
3) If you're certain there is no threat of XSS/hacks with the data, you could use dangerouslySetInnerHTML
with a 'br' for each line:
var TextLines = React.createClass({
render: function() {
var lines = this.props.lines;
var content = {
__html: lines.join('<br />')
};
return (<div dangerouslySetInnerHTML={ content } />);
}
});
var lines = ['line 1', 'line 2', 'line 3'];
React.render(<TextLines lines={ lines } />,
document.getElementById('container'));
The last one produces the least amount of HTML, but at a cost of potentially risky the security of the web page/user. I wouldn't use this one if the others work for you.
When you really need this, use {'\n'}
inside your JSX.
Try white-space: pre;
or white-space: pre-wrap;
(Thanks, @Mirage) in the style of your cell.
td {
width: 150px;
}
.nopre {
background-color: lightblue;
}
.withpre {
background-color: lightgreen;
white-space: pre;
}
.withprewrap {
background-color: orange;
white-space: pre-wrap;
}
<table><tr>
<td class="nopre">Line A
Line B
Line C
This is a cell with no whitespace setting</td>
</tr></table><table><tr>
<td class="withpre">Line 1
Line 2
Line 3
This is a cell with white-space: pre</td>
</tr></table><table><tr>
<td class="withprewrap">Line 1
Line 2
Line 3
This is a cell with white-space: pre-wrap</td>
</tr></table>