I would like to have a React app where on a page there would be a component which would describe wikipedia articles. I could use the mediawiki API to get the raw html data of an article however I have yet to have a solid idea on how I could attach an onClick event to the a tag links in this raw html.

The idea would be that whenever a user clicks on a link inside the article the getWiki function (or something similar to this, this is just a rough draft at this point) would be called with the new page title and the component would rerender.

This is the getWiki function for now which sets two states, the wiki state is then inserted by dangerouslySetInnerHTML to a div.

  const getWiki = async () => {
    const url =
      "https://en.wikipedia.org/w/api.php?" +
      new URLSearchParams({
        origin: "*",
        action: "parse",
        page: "Pet door",
        format: "json",
        prop: "text",
      });

    try {
      const req = await fetch(url);
      const data = await req.json();
      setWiki(data.parse.text["*"]);
      setTitle(data.parse.title);
    } catch (e) {
      console.error(e);
    }
  };

I would like to use the API rather than an iframe because this way I don't get all the navigation bars from wikipedia just the plain articles.

Any idea is welcome.