Integrate Phaser Game with React as component

Question

I'm new to React, I want to make a component for my phaser game to insert it into a react project.

My Game component:

import React, { Component } from 'react'
import Phaser from 'phaser'

class Game extends Component {

  constructor() {
    super();

    this.config = {
        type: Phaser.AUTO,
        width: 700,
        height: 600,
        parent: "game",
        pixelArt: true,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 0 }
            }
        },
        scene: {
            preload: function(){
              this.load.image('tiles', process.env.PUBLIC_URL + '/assets/TILES.png');
              this.load.tilemapTiledJSON("map", process.env.PUBLIC_URL + "/assets/MAP.json");
            },
            create: function(){
              const map = this.make.tilemap({ key: "map" });
              const tileset = map.addTilesetImage("TILES", "tiles");

              const worldLayer = map.createLayer("World", tileset, 0, 0);
            },
            update: function(){

            }
        }
    };

    this.game = new Phaser.Game(this.config);


  }

  render() {
    return (<div id="game"></div>)
  }
}

export default Game;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Game from './Game';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Game />
  </React.StrictMode>,
  document.getElementById('root')
);
reportWebVitals();

As you can see from this image, the image is reapeated 4 times, why? How can I fix this? I have tried setting fixed size to the div but it didnt work.

Answer 1

One solution would be to move the creation of the Phaser.Game Object, "game" into the method componentDidMount (link to the documentation). Because if new Phaser.Game is called, and the parent is not in the DOM, the canvas will be added, ignoring the parent.

just add this method to the Game class:

componentDidMount() {
    this.game = new Phaser.Game(this.config);
 }

I'm not sure if it is the best way, but it works (on my demo app).

Side-Note: in my demo I didn't get 4 images/(phaser-)canvas I just had 2. On using my solution, it went down to the usual one canvas.