\n Doesn't work properly

[sash20m]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

^9.0.1

Link to runnable example

https://stackblitz.com/edit/github-mmihct?file=src%2Fapp.tsx

Steps to reproduce

Install react-markdown and add as mardown the string "abc\nabc" or any other with the \n. It only makes a blank space between the words. If I added two \n then there will be a new line, but if I added 3 or 4 \n, also it remains only at one new lines. I tried it in a fresh react app, and implemented it exactly as said in docs.

function App() {
  return (
    <div className="App">
      <MarkdownText markdown={"dasd\ndsad"} />
    </div>
  );
}

const MarkdownText = ({ markdown }) => {
  return <Markdown>{markdown}</Markdown>;
};

[JounQin]

Please provide minimal but runnable online reproduction.

[sash20m]

Please provide minimal but runnable online reproduction.

https://stackblitz.com/edit/github-mmihct?file=src%2Fapp.tsx

[JounQin]

This is how markdown works?

[github-actions[bot]]

Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.

[github-actions[bot]]

Hi team! I don’t know what’s up as there’s no phase label. Please add one so I know where it’s at.

Thanks, — bb

[ChristianMurphy]

Welcome @sash20m! 👋 Sorry you ran into some confusion.

As @JounQin mentioned that is how markdown works. If you want an alternative behavior for newline you can use plugins like https://github.com/remarkjs/remark-breaks

[remcohaszing]

As @JounQin stated, this is how markdown works.

I don’t recommend it, but if you insist on turning single newlines into line breaks, you can use remark-breaks.

[sash20m]

As @JounQin stated, this is how markdown works.

I don’t recommend it, but if you insist on turning single newlines into line breaks, you can use remark-breaks.

I was under the impression its relation to \n is the same as any string. I have a long text with \n's and react-markdown fails to add new lines properly to the component.

I'll look at the plugin mentioned above, thank you.