How to use HTML with JS in React app to export component

I'm assuming you don't want to consider a functional component because of maintaining something in the html/css/js that can't be easily refactored into React:

ie.

const NewComponent = () => {

const functions = () => {

}

   return (
     <div style={styles} ></div>


   );
}

const styles = {
...css
}

export default NewComponent;

Then I'd say your best solution would be to paste the body of html from admin-page.html into you index.html file.

Preferably under the root div tag ( ).

This will show up under all your React code (like a footer would) but you can use a class name or id to show / hide the page under certain conditions.

Then just link your css and js as separate stylesheets / scripts in the header and footer.

I would strongly advise against this though as it will most likely increase your technical debt to the project.

Hope it helps : )

[update]

By default, React does not permit you to inject HTML in a component, for various reasons including cross-site scripting. However, for some cases like a CMS or WYSIWYG editor, you have to deal with raw HTML. In this guide, you will learn how you can embed raw HTML inside a component.

dangerouslySetInnerHTML Prop If you try to render an HTML string inside a component directly, React will automatically sanitize it and render it as a plain string.

Ok so looking at this again if you just want to add the complete 200+ lines of HTML / JS I'd say you could just import them to a component with the dangerously SetHTML prop. Like so:

const HTML = import('../the/file/path/to/the.html');
const JS = import('../the/file/path/to/the.js');

const newComponent = () => {
return (
    `<div dangerouslySetInnerHTML={{ __html: myHTML }} />;`
    )

}

Alternatively, If you want a safer solution you could use dompurify:

If XSS is a primary concern, you can use an external library like DOMPurify to sanitize the HTML string before injecting it into the DOM using the dangerouslySetInnerHTML prop.

To install the DOMPurify library, run the following command.

npm i dompurify

You can see the example usage below.

import DOMPurify from "dompurify";

const myHTML = `<h1>John Doe</h1>`;

const mySafeHTML = DOMPurify.sanitize(myHTML);

const App = () => <div dangerouslySetInnerHTML={{ __html: mySafeHTML }} />;

You can also configure DOMPurify to allow only specific tags and attributes.

// ...
const mySafeHTML = DOMPurify.sanitize(myHTML, {
  ALLOWED_TAGS: ["h1", "p", "span"],
  ALLOWED_ATTR: ["style"],
});
// ...

With many thanks to Gaurav Singhal for this brilliant article:

https://www.pluralsight.com/guides/how-to-use-static-html-with-react