reactjsreact-hooksmarkdownreact-markdown

Render JSX inside ReactMarkDown

How to render JSX inside ReactMarkDown? I want to wrap my JSX elements inside ReactMarkDown component and achieve something like this,

  <ReactMarkdown>
    <Grid>
      {Some text}
    </Grid>
    <Grid>
      {Some text}
    </Grid>
 </ReactMarkdown>

What is the best possible approach for this rather than using <ReactMarkdown> multiple times inside each JSX element?

Solution

  • You can take a look at MDX, it lets you use JSX and markdown together.

    For example:

    <Grid>
  # heading
</Grid>
<Grid>
  *italic*
</Grid>