Typography in React Material-UI

Question

I've this textbox:

<Typography component="p" className={classes.text}>
        {this.props.post.text}
</Typography>

I'd like to be able to include paragraphs but all text entered into it gets printed on one line.

The documentation suggests that paragraph is defaulted to false so I must set it to `true.

I've tried the following:

<Typography component="p" className={classes.text} paragraph="true">

I also tried:

<Typography component="p" className={classes.text} paragraph={true}>

Neither work so all my text still gets printed to one line.

How do I get the paragraphs to show?

Additional info: As I now understand, the paragraph={true} attribute in Typography just adds a bottom-margin to the whole text. I.E. my one block of text is a paragraph. If I want another paragraph I would have to add another Typography. Something like:

<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text}
</Typography>
<Typography component="p" className={classes.text} paragraph={true}>
        {this.props.post.text2}
</Typography>

This is not exactly what I want. Perhaps what I should be aiming for is to have the return characters in my input text recognised. Is this correct and if so, how is it done?

I tried this:

  <pre>
    <Typography component="p" className={classes.text}>
      {this.props.post.text}
    </Typography>
  </pre>

The tag preservers the whitespace and line breaks inside the tags as is.

This is not suitable though. If I have long line the text does not wrap at the Card width. Instead anything beyond the width of the card becomes truncated. Clearly I want it all. I want my text to wrap in the card and also for it to support new lines and paragraphs. How is this done?

Answer 1

For new paragraphs

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

For just new lines

<Typography>
  {this.props.text.split("\n").map((i, key) => {
    return <div key={key}>{i}</div>;
  })}
</Typography>

Answer 2

I tried your answer and it worked perfectly as needed. However, the console returns a minor error

Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

I improved on your answer slightly by replacing the <p> tags in your .map() with <Typography> and wrapping it all in a <div> instead, like so:

<div className={classes.text}>
  {this.props.post.text.split('\n').map((i, key) => {
    return <Typography key={key} paragraph variant="body1">{i}</Typography>;
  })}
</div>

(you can replace body1 with whichever variant you want!)

This seems to get rid of the warning for me and I hope works as you intended.

Answer 3

A better way is to use power of css:

white-space: pre-line

"New line" character will be respected if you use this css property.

Answer 4

I've come up with this:

<Typography component="p" className={classes.text}>
  {this.props.post.text.split("\n").map((i, key) => {
    return <p key={key}>{i}</p>;
  })}
</Typography>

If there is a better way to do this I'd be keen to hear it.

Answer 5

This really is a strange behavior. From what I can tell, you are doing everything correctly. p is by itself displayed as block element so it should be by default displayed the way you want it to be. But, it could be that you are overriding that in your .text css class. Try to see if there is you problem. If not, you can always use variant property variant="headline" in order to put them on new lines.

Answer 6

If I get this right, you could simply leverage the power of HTML and add <br />-elements, to insert line-breaks.