I wrote an algorithm to parse and generate table of contents based on my markdown files. The table of contents output from markdown is raw HTML strings that I set using setDangerouslyInnerHTML.

• Table of Contents library I made here

Snippet

const TableOfContents = ({ toc }) => {
  return (
    <div className={post["toc"]}>
      <h2>Table of Contents</h2>
      <div dangerouslySetInnerHTML={{ __html: toc }}></div>
    </div>
  );
};

The problem is, the standard href links on the li elements are not triggering anchor tag movements on the page.

The headers on the page have an id like <h1 id="test>.. and the corresponding

<li><a href="#test">test</a></li> doesn't trigger the navigation. Looking online, I know <Link> is recommended, but my generation is dynamic and all I do is interpolate the string into the page, so I haven't figured out a way to have any fancy JSX or function invocation embedded into the string. However, I'm still confused why the standard HTML clicking would not work?