how can i insert a standlone game project (html js) inside a react component?

Question

I want to render a standlone html js project (game project) inside a react component.

standlone html js project portion code:

react component

export default function Tetris() {
  function iframe() {
    return {
      __html:
        '<iframe src="../../../Standlone Games/Tetris/index.html" width="540" height="450"></iframe>',
    };
  }

  return (
    <div>
      <div dangerouslySetInnerHTML={iframe()} />
    </div>
  );
}

result:

I have tried using dangerouslySetInnerHTML & iframe , but i receive a 404 (Not Found) error and an empty frame ! while the path is 100% correct!

result:

Answer 1

Why not render a native <iframe> element in the component?

const { useState } = React;

const GAME_URL = "https://ceolter.github.io/tetris/";

const Tetris = () => {
  return (
    <div className="Tetris">
      <iframe
        src={GAME_URL}
        width={540}
        height={450}>
      </iframe>
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <h1>Tetris</h1>
      <Tetris />
    </div>
  );
};

ReactDOM
  .createRoot(document.getElementById("root"))
  .render(<App title="Example using Hooks:" />);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>