ComponentDidMount() not working - reactjs

Question

I am making a game using matter.js in reactjs.
I am suffering a problem where I cannot return anything in the render().
Probably this is because matter.js has its own renderer.
So I did not retun anytihng into the render section.
If i don't return anything in the render section componentDidMount do not run.
I am Unable to run componentDidMount() and i cannot call any function even though i bind it.
I am calling a start_game() function to start game but any other function that I call within start_game() an error comes which says that no such function exist even though I have declared it within the class.
import React, { Component } from 'react';
import Matter from 'matter-js';
const World = Matter.World;
const Engine = Matter.Engine;
const Renderer = Matter.Render;
const Bodies = Matter.Bodies;
const Events = Matter.Events;
const Mouse = Matter.Mouse;
const MouseConstraint = Matter.MouseConstraint;
const Body = Matter.Body;
class Walley extends Component
{
constructor(props)
{
super(props);
this.world = World;
this.bodies = Bodies;
this.engine = Engine.create(
{
options:
{
gravity: { x: 0, y: 0,}
}
});
this.renderer = Renderer.create(
{ element: document.getElementById('root'),
engine: this.engine,
options:
{
width: window.innerWidth,
height: window.innerHeight,
background: 'black',
wireframes: false,
}
});
this.state = {
play_game: false,
score:0,
};
this.play_game=this.play_game.bind(this);
}
play_game(){
this.setState
({
score: 50,
});
}
startGame()
{
console.log(this.state.play_game);
//don't know how here the value of play_game is set to true even it was false in componentWillMount()
if(this.state.play_game){
this.play_game();
//unable to access play_game
}
}
componentWillMount()
{
if (confirm("You want to start game?"))
{
this.setState({play_game: true});
}
console.log(this.state.play_game);
//even though play_game is set true above yet output at this console.log remains false
}
render()
{
if(this.state.play_game)
this.startGame();
}
componentDidMount()
{
//unable to access
console.log('Did Mount');
}
}
export default Walley;

Answer 1

render needs to be a pure function, meaning you should not call startGame from inside render. I think you want something closer to this:
// remove this
// componentWillMount() {}
componentDidMount() {
if (confirm("You want to start game?")) {
this.setState({play_game: true}, () => {
console.log(this.state.play_game);
});
startGame();
}
}
render() {
// eventually you will want to return a div where you can put your matter.js output
return null;
}