Adding multiple line break in react-markdown

Question

Currently I'm using React and have content in my rich text in strapi CMS that is spaced out the way I want it in my markdown version, but as soon as I switch to preview, or view the content in my browser, the spaces go away. I have tried adding <br/> tags, but there was still no line breaks.

This is the content in my strapi markdown:

But this is the output on my webpage:

This is my current code:

import ReactMarkdown from "react-markdown";
import rehypeRaw from "rehype-raw";
export default function name({ posts }) {
  return (
    <>
        <div>
          {posts.Title}
        </div>
      <div>
        <ReactMarkdown children={posts.Content} rehypePlugins={[rehypeRaw]} />
      </div>
    </>
  );
}

Answer 1

use remark-breaks

and replace \n with   \n. if one \n doesn't work, try adding one more

import remarkBreaks from "remark-breaks";

//...

<ReactMarkdown 
  remarkPlugins={[remarkBreaks]}
  rehypePlugins={[rehypeRaw]}
  children={posts.Content.replace(/\n/gi, "&nbsp; \n")}
/>

Answer 2

For adding multiple line break, this should do it:

import React from "react";
import "./styles.css";

import ReactMarkdown from "react-markdown";

export default function App() {
  const markdown = `hello
  \n  
  \n  
  \n  
  \n  
  \n
  world
  `;

  return (
    <div className="App">
      <ReactMarkdown source={markdown} />
    </div>
  );
}