Nested MDX component

user_14103836 0
Viewed 511

I have a componet which used in mdx files The problem is that the content in the componet is rendered as text but I want to render them as mdx. This is how mdx file look likes:

---
title: Topic 1
---
<Notice> Notice **Two** with link [link](https://angular.io/) </Notice>

outside look: Notice **Two** with link [link](https://angular.io/)

And this is the Notice component

import React from "react";

const Notice = ({ children, type }: { children: any; type?: string }) => {
  return (
    <div style={{ border: "2px solid dodgerblue" }}>
      <p>{type}</p>
      <div>{children}</div>
    </div>
  );
};

export default Notice;

And also this is the code of root file:


import * as React from "react";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { MDXProvider } from "@mdx-js/react"

import Notice from './notice/notice';


export default function ({ docName, title, body, slug }) {
  const shortcodes = {Notice};
  return (
    <div style={gridWrapper}>
      <article>
        <h1>{title}</h1>
        <div>
          <MDXProvider components={shortcodes}>
              <MDXRenderer>{body}</MDXRenderer>
          </MDXProvider>
        </div>
      </article>
    </div>
  );
}

Any idea how to fix this issue?

gatsby reactjs markdown
1 Answers

</Notice> this part in the mdx file should be rendered as a link and a bold text right?

It doesn't unless you add an MDX Renderer or a markdown parser (like markdown-to-jsx) to parse the markdown syntax into HTML.

In the end, what you are wrapping inside Notice is a plain text that is rendered using the Notice's component JSX structure, where the children is rendered as-is ({children}).

That said, you can try using the MDXRenderer in your Notice component like:

import React from "react";
import { MDXRenderer } from "gatsby-plugin-mdx"

const Notice = ({ children, type }: { children: any; type?: string }) => {
  return (
    <div style={{ border: "2px solid dodgerblue" }}>
      <p>{type}</p>
      <MDXRenderer>{children}</MDXRenderer>
    </div>
  );
};

export default Notice;

I'm not sure how will behave the code nesting MDXRenderer, that's why I suggested the markdown-to-jsx solution, which will result in a very similar scenario like:

import React from "react";
import Markdown from 'markdown-to-jsx';

const Notice = ({ children, type }: { children: any; type?: string }) => {
  return (
    <div style={{ border: "2px solid dodgerblue" }}>
      <p>{type}</p>
      <Markdown>{children}</Markdown>
    </div>
  );
};

export default Notice;
user_55853710
Related