Inserting HTML code

[guillemc23]

Hey! I am building a template using this tool, but I would like to reuse some old html that we used to send on our emails in the past. Would it be possible to just inject some html file into the email?

Creating a component like this works:

import React from "react";

const Podium = () => {
  const htmlString: string = "<p>Hello <strong>world</strong>!</p>";
  // Use dangerouslySetInnerHTML to render raw HTML
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
};

export default Podium;

but I would like to read the html to be inserted from a text file instead of a variable. My HTML is ready to be inserted on an email so I wouldn't need to do any kind of transformation to it, just allow it to be injected using a similar approach to this one

[aniruddha76]

Yes, you can read HTML from a file and inject it into your React component. To get this done, you can use Node.js (assuming you're using it for your build) to read the HTML file and then pass the content to your React component.

Here's an example:

import React, { useEffect, useState } from "react";

const Podium = () => {
  const [htmlContent, setHtmlContent] = useState<string>("");

  useEffect(() => {
    const fetchHtmlContent = async () => {
      try {
        // Use the appropriate path to your HTML file
        const response = await fetch("/path/to/your/file.html");
        const htmlString = await response.text();
        setHtmlContent(htmlString);
      } catch (error) {
        console.error("Error fetching HTML content:", error);
      }
    };

    fetchHtmlContent();
  }, []); // Empty dependency array to run the effect only once

  // Use dangerouslySetInnerHTML to render raw HTML
  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
};

export default Podium;

it worked for me..
if that helps, mark this as answer.