New line with react-markdown

Question

I am trying to pull the markdown string from firebase database then using react-markdown to render it into Component. But the markdown string doesn't show correctly. I think the problem is due to start with new line.

I tried to declare the variable I put markdown in there. it works. markdown string which is created in Component

But the markdown string which is pulled from firebase database. it doesn't show correctly. markdown string which is pulled from firebase database

Here is my code

export default function BlogTemplate() {
  const { id } = useParams();
  useFirestoreConnect([
    {
      collection: "communications",
      doc: id
    }
  ]);
  const post = useSelector(
    state =>
      state.firestore.data.communications &&
      state.firestore.data.communications[id]
  );

  if (post) {
    const input =
      "# This is a header\n\nAnd this is a paragraph \n\n # This is header again"; // this is a markdown string created in Component
    const postContent = post.content; // This is the markdown string pulled from firebase database
    return (
      <Layout>
        <Container>
          <Content className="pt-5 pb-5">
            <ReactMarkdown source={input} />
            <ReactMarkdown source={postContent} />
          </Content>
        </Container>
      </Layout>
    );
  } else {
    return <p>Loading...</p>;
  }
}

Answer 1

first create css class forexample

.foo {white-space: 'pre-wrap';}

then add classname to markdown component

<ReactMarkdown source={input} className="foo" />