How to have markdown content in components in MDX files?

Question

I'm working on a project with MDX pages using React components. When I add text inside the component I would like to have HTML generated (like with content outside of components). But the generated page has only text inside the component and not HTML.

This is my code:

Component js:

<Container>
    {props.children}
</Container>

MDX page:

<Component>
     **Generated HTML**
</Component>

Generated page:

<div>
     **Generated HTML**
</div>

Expected behaviour:

<div>
     <p><strong>Generated HTML</strong></p>
</div>

How can I fix this?

Thanks!

Answer 1

I found the solution here, I just needed to add a new line between the tags like this:

<Component>

**Generated HTML**

</Component>

Thanks for the help!