How to pass markdown as props without declaring extra const

[tsykin]

Hello there. I am working on my Next.js 13 app. I have a section component and want to pass markdown as props to this component.
My goal is to make content of this section completely dynamic, so that I would be able to do smth like this:

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

or at least something like this:

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

I am using markdown-to-jsx package to parse Markdown.
It seems to work when markdown is inside the component's file, but when I try to use this component on a page and pass markdown as prop dynamically I am getting an error "Error: Cannot read properties of undefined (reading 'replace')".

Please, suggest a solution or some other clever way of doing that :)

[ChristianMurphy]

Welcome @tsykin! 👋
Sorry you ran into a spot of trouble.

I am using markdown-to-jsx package to parse Markdown.

markdown-to-jsx is completely unrelated to mdx or remark.
If you would like to use mdx you can find usage examples here: https://mdxjs.com/docs/using-mdx/
Or react-markdown here: https://github.com/remarkjs/react-markdown#readme

It seems to work when markdown is inside the component's file, but when I try to use this component on a page and pass markdown as prop dynamically I am getting an error "Error: Cannot read properties of undefined (reading 'replace')".

A bug in markdown-to-jsx would be something you should report to them https://github.com/probablyup/markdown-to-jsx/issues.
mdx and remark do not have that bug.

How to pass markdown as props without declaring extra const

I'm not sure I follow your question.
JavaScript stores dynamic content in variables.
Any component you use will need a variable to make the content dynamic.
I see no extra const in either of your examples.

[tsykin]

I realize that I might not have been descriptive enough in my question.
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 what the issue 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.

[wooorm]

It sounds like you didn’t read what Christian said? You have problems with a tool that has nothing to do with us.

[ChristianMurphy]

You don't appear to be using or plan to use MDX, this is the MDX forum, not the support forum for markdown-to-jsx.
If you are interested in migrating to MDX happy to offer suggestions, but it sounds like react-markdown would be a better fit for you usage.
react-markdown has the same maintainers, and its own discussion forum here: https://github.com/orgs/remarkjs/discussions

---

Wherever the question lands, please read the support guidelines https://mdxjs.com/community/support/ this advise helps when asking for help from any project.

In particular:

• Talk to a duck!
• Don’t fall for the XY problem
• Search to find out if a similar question has been asked
• Try to define what you need help with:
  • Is there something in particular you want to do?
  • What problem are you encountering and what steps have you taken to try and fix it?
  • Is there a concept you don’t understand?
• Provide sample code, such as a CodeSandbox or video, if possible
• The more time you put into asking your question, the better we can help you