Wie lade ich eine lokale HTML Datei in React und zeige diese an?

In diesem Beitrag zeige ich euch das Laden einer HTML Datei in React und wie ihr diese anzeigen könnt. Ihr solltet dies nur tun, wenn ihr der anzuzeigenden Datei vertraut, denn diese kann Schadcode in eure Seite injizieren.

Der Code innerhalb von useEffect wird beim Aufrufen und Neuladen der Komponente Example einmalig ausgeführt. Das Laden per fetch erfolgt asynchron. Fetch gibt ein Promise zurück. Ist das Laden der Datei abgeschlossen wird der Code innerhalb von then ausgeführt.

Zum Speichern des Inhaltes nutzen wir einen State und setzen diesen mit setContent auf den Inhalt der Datei. Die Variable content reflektiert die Änderung des Inhaltes und zeigt diesen an.

import { useState } from "react";
import { useEffect } from "react";
export const Example = (props) => {
  const [content, setContent] = useState("");

  useEffect(() => {
    fetch("./myFile.html").then((response) => {
      setContent(response.data);
    });
  }, []);

  return <div dangerouslySetInnerHTML={{ __html: content }} />;
};