Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

newlines character ignored by jsx table

I am trying to create a table with a multiline string, but the string is not formatted correctly by my table. Here is the jsx:

<td>
  {arr.join('\n')}
</td>

And here is the corresponding html:

<td data-reactid=".xyz">Line 1
Line 2
Line 3
Line 4</td>

But in the browser it looks like:

enter image description here

What's going on and how do I get my newlines to appear?

like image 486
Eric Baldwin Avatar asked Apr 01 '15 22:04

Eric Baldwin


People also ask

How do you insert a line break in JSX?

You can use {'\n'} as line breaks.

How do you show line breaks in React?

To display line breaks from saved text area in a React component, we can set the white-space CSS property to pre-line . We have the p-wrap class that has the white-space CSS property set to pre-line . Then we apply that class to the p element.

How do you use the BR tag in react native?

To insert a line break into a Text component in React Native, we can add the '\n' character string. to add {'\n'} into the content of Text . Then we see: Hi This is a test message.

How do you line break through text?

<br>: The Line Break element. The <br> HTML element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.


2 Answers

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>
like image 185
Chris Avatar answered Oct 13 '22 21:10

Chris


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.

like image 33
WiredPrairie Avatar answered Oct 13 '22 21:10

WiredPrairie