Who can help with react lifecycle methods?

Question

JavaScript

Hello. I wrote a small game to practice on react. The essence of the game is to press the START GAME button and quickly click on all the blue cubes that disappear after clicking. At the end, an alert window pops up with the time and the number of pressed cubes. But there are bugs:
1 After downloading, you can click on the blue cubes and they will disappear, without pressing START GAME. (You can even win the game with a zero time counter).
2 If you press the START GAME a couple of times in a row, the counter accelerates, and after winning, if you press the button, then the time continues.
3 How to make a REFRESH button to restart the game after winning and not reload the entire page.
I would be very grateful if someone helps with bugs or gives advice on how to make the game better) Thank you and have a good weekend everyone!)
https://quintis1212.github.io/react-game/build/ind... - the game itself
https: //github.com/Quintis1212/react-game/tree/mas... - repository
Game consists of three components App <= MainInfo <= Game

import React from 'react';
import './App.css';
import MainInfo from './GameContent/MainInfo';

function App() {
  return (
    <div className="App">
      <MainInfo />
      10101010101000101010101000
    </div>
  );
}

export default App;

import React, {Component} from  'react';
import Game from './GameTable/Game';



class MainInfo extends Component {
    state = {
        count:0,
        timer:0,
        initGame: false
    }

    shouldComponentUpdate(){
        return this.state.initGame;
    }

    logToConsole = (e)=> {
        if (e.target.className === 'Element') {
            this.setState((state)=>{
                return {count: state.count + 1}
             });
             e.target.className = 'Element-empty';
            console.log(e.target.className)
        }
    }


    
    timerUpdated(){  this.setState((state)=>{
        return {timer: state.timer + 1}
     }); }

    

    initGameHandler =()=>{
        this.setState({initGame: true})
       console.log('refreshHandler')
       this.timerID=setInterval(() => {  this.timerUpdated() }, 1000);
    }

    finishGameHandler = (score)=>{
        console.log(score)
        if(this.state.count === score-1) {
            alert('-----GAME OVER-----'+
            'YOUR TIME: '+this.state.timer+'seconds'+
            ' YOUR COUNT: '+this.state.count+'points');
            clearInterval(this.timerID)
            this.setState({initGame: false})
        }

     }

render(){
    
    return(
        <div>
            <p>Timer : <strong>{this.state.timer} seconds </strong></p>
            <p>Counter :<strong>{this.state.count}</strong></p>
            <button onClick={this.initGameHandler}>START GAME</button>
            <Game click={this.logToConsole} updateData={this.finishGameHandler} />
        </div>
    )
}
 }
   
   
export default MainInfo;

import React,{Component} from  'react';

class Game extends Component {

    shouldComponentUpdate(){
        return false
    }

    render() {
        let item;
        let count = 0;
        let arr = [];
        for (let i = 0; i < 70; i++) {
    
             arr.push(Math.floor(Math.random() * 10));
    
        }

      item = arr.map((el,i,arr) => {
          count++
            return el < 2 ? arr[i-1] < 4?<div key={count} className='Element-empty'></div>:<div onClick={(e)=>{this.props.click(e)}}  key={count} className='Element'></div>  : <div key={count} className='Element-empty'></div>
        })



      //  console.log(item.filter(el => el.props.className == 'Element'))
        let score = item.filter(el => el.props.className === 'Element')
        let scoreLenhgth=score.length
        return(
            <div onClick={() => { this.props.updateData(scoreLenhgth)}} >
            {item}
            </div>
        )
    }

 }
   
   
export default Game;

Answer 1

so that you can’t immediately press do just if, there is a false variable and while it is false, the function that processes the click on the blue block does not start, as soon as you press start, the variable is true and the function of clicking on the blue square is available and by the way the game is designed for how quickly you can find the block it’s better not to show it in the list so that a person doesn’t know where to press before the start))) but in theory, so that random blocks are placed. Reset the timer every time you press start, so that each press is 1 start with zero values.