Create new line with react tsx not working

Question

I want to set the username on a new line in my React tsx (TypeScript) web application.

entry.comment contains the following string: jsdkjfdjsfds
entry.username contains the following string: Noah

My code looks like this, I tried with \n but this isn't working:

<div className={classes.entryContent}>
  <Typography className={classes.entryContentParagraph} variant="body2" paragraph={true}>
    <ReactMarkdown>
      {entry.comment + "\n" + entry.username}
    </ReactMarkdown>
  </Typography>
</div>

Do you have an advice? Stay fresh!

Answer 1

<div className={classes.entryContent}>
  <Typography className={classes.entryContentParagraph} variant="body2" paragraph={true}>
    <ReactMarkdown>
      <p>{entry.comment}</p>
      <p>{entry.username}</p>
    </ReactMarkdown>
  </Typography>
</div>

Answer 2

According to this issue and to markdown conversions

https://github.com/remarkjs/react-markdown/issues/273

You should put two spaces at the end of the line you want to break, basically, something like:

line one  \nline two

This

will give you

but this

will give you

Answer 3

Since I don't have enough reputation I have to add it in an answer.

I haven't worked with this library before but can you try adding the break-line tag, like <br />.