Typography in React Material-UI

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>

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.

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.

Edit: Help from Ionut-Alexandru Baltariu

<Typography id="modal-description" sx={{ whiteSpace: 'pre-line'}}>