Material-UI Paper component does not recognize new line character

[alexanderwhatley]

I am passing to the Material-UI Paper component a string that contains a new line character. However, the Paper component seems to be ignoring it, as it is not starting a new line. Is this behavior intentional, or is this a bug. The code in question is below (comment.text is the string in question):

<Paper key={index} rounded={false} style={styles.paper}> 
<div>{comment.text}</div> 
<div style={{textAlign: 'right', color: grey500}}>{comment.user + ", " + comment.date}</div> 
</Paper>

[m2mathew]

@alexanderwhatley What is the value of comment.text? And which versions of everything are you using? The template that we provide is to help answer the questions more efficiently. 😁

[alexanderwhatley]

Hey @m2mathew, sorry about that. The version of material-ui is 0.17.4, and the value of comment.text is "Hi how \n are you?"

[m2mathew]

Well, think about how the DOM would handle this. I would expect \n to render if I put that between two <div>s in an HTML file.

Since this isn't related to MUI explicitly, I will close this issue. Be sure to head to Stack Overflow or similar for more help implementing content within the DOM.

[ericksprengel]

I used: style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

Reference:
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

[goodwin64]

It seems like it worth additional prop on the "Typography" component.

[Stephane-Ag]

I used: style={{whiteSpace: 'pre-line'}}

<Typography
  variant="body1"
  style={{whiteSpace: 'pre-line'}}
>
  {body}
</Typography>

Reference:
https://stackoverflow.com/questions/39325414/line-break-in-html-with-n

Make sure to put your string in a separate 'body' variable. Writing it in-line does not work. And you do not need explicit '\n' characters.

const body = `Example line:
    Example1
  
  Example line2:
    Example2
  `;

To allow tabs as well, use style={{whiteSpace: 'pre-wrap'}} instead.