How to pass markdown as props without declaring extra const

Question

I am working on my Next.js 13 app. I have a section component and want to pass markdown as props to this component.

I couldn't find a solution anywhere online, that's why I am reporting it here.

My goal is to make content of this section completely dynamic, so that I would be able to do something like this:

<SectionTwoColumns markdownContent="
# Title
Just a paragraph
**bold text**
" />

or at least something like this:

<SectionTwoColumns markdownContent="# Title /n Just a paragraph /n **bold text**" />

Currently I can't make it so that markdown is passed as props. I only managed to make it so that content is stored in a const on the page where component is being used.

So currenttly I do it like this:

const markdownContent = `# MDX content inside const
 
## Second title

Just a paragraph

** bold text **
 
`;

const Home = () => {
  return (
    <main>
      <SectionTwoColumns>
        {markdownContent}
      </SectionTwoColumns>
    </main>
  );
};

In order to better explain this issue here's github repo that shows the issue when markdown is passed as prop but only one line of markdown could be parsed: https://github.com/tsykin/tsykin-frontend

Feel free to check it out, this repo is automatically get's deployed to Vercel, so you can see live how the app currently looks like: https://tsykin-frontend.vercel.app/

I am looking for a solution when I can pass a lot of content with markdownContent prop into SectionTwoColumns component.

Please, suggest a solution that would allow to pass markdown as a prop directly, without a need of creating extra const with markdown inside of it.

Answer 1

Try like this!

I believe it will works!

import Markdown from 'markdown-to-jsx'

<SectionTwoColumns markdownContent={<Markdown>
    # Title
    **bold text**
  </Markdown>} />

Answer 2

I have solved the issue. It's strange that it didn't work for me before since I definately tried that before.

Now I can pass markdown as props like this:

<SectionTwoColumns
        markdownContent={`
# Title
First paragraph

**Second bold paragraph**
## h2
### h3
`}
      />

... without declaring extra const.

P.S. headers are automatically indented

Source: GutHub Issue