Parse string prop as markdown

[edward1127]

How can I parse a string prop (props.content in the example below) as markdown within a mdx file?

import React, { useState } from "react";
import Dropdown from "/components/Dropdowns/Dropdown";

# My MDX page

**This is an unordered list**

- Item One
- Item Two
- Item Three

{props.content}


export default ({ children }) => <div className="prose">{children}</div>;

[remcohaszing]

MDX does not compile props. If you pass props as a string, you get them as a string. If you want to treat the content as markdown, you can use something like react-markdown.

[edward1127]

thanks for the reply.

[edward1127]

I'm trying to parse some custom syntaxs such as [[number-input]] and replace them with react input components. In that case, I think I might need to find some other packages?

[remcohaszing]

You can do this with react-markdown and a remark plugin. However, it’s generally not recommended to invent your own syntax. Have you considered using rehype-raw or remark-directive?

[edward1127]

thanks for the suggestions! I will check those packages.

[wooorm]

You shouldn’t, probably.

It’s the same question: “Parse string prop as JavaScript”. You shouldn’t. You can write JavaScript in JavaScript. You shouldn’t use strings for that. You can do it of course, with an eval function (we have one too), but it’s typically unsafe, slow, and a really bad idea.

[wooorm]

Practically, you define props.content somewhere.
That’s where you shouldn’t make it a string, but React elements or whatever.
That’s the place you need to fix.

[edward1127]

Got it! Thanks!

[donny-bras]

@wooorm I didn't quite get what you meant. I need to pass a markdown string to a component, how can I do it?
Could you please, give an example? Thanks!

[wooorm]

No you probably don’t. If you are, you are more likely to be doing it wrong. Don’t. If you really have to, read the docs: evaluate.

Use MDX.

Also, I have no clue what you are doing. So I have no clue how to help you.