How to make the table of contents show headers added with React in an MDX file?

[albertothedev]

This code will render two h2 headers, yet only the one directly specified is shown in the table of contents.

docs/example.mdx

Website

[Josh-Cena]

Please see #3915

[PaulRBerg]

I have the same problem as @albertothedev.

I've read through the issue you linked, but I am still unsure whether this feature (ToC headers when generating MDX content dynamically with React) is supported or not.

Could you please provide a summary?

cc @slorber

[slorber]

We don't support that because our remark plugin that extracts headings works at compile time.

The JSX <h2> tag might be produced by a very deeply nested component. The React code you provide isn't evaluated, we don't run it to see what gets rendered, we extract it at compile time and need an easy way to do so.

If you want full control over the TOC, you have export const toc = [] and create your own TOC items manually.

---

In the future, the best we could do is to eventually support this use-case better by allowing your custom React components to expose a "toc slice".

export default function MyComp() {
  return <h2>Hey!</h2>
}

MyComp.toc = [{level: 2, value: "Hey!", id: "hey"}]

---

Various related discussions are in #3915