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'}}>