Function is not being called as it should in React onClick()

Question

Basically, i created a button to call a function when the button is clicked, it's working, the console.log() shows the message "Working", but the script inside it, it's not being shown on the browser. I have no idea what's wrong, could someone help me? I'm very new in Software Engineer and started learning React a few days ago, so i dont know too much about it.

This is the entire code:

class QuizGame extends React.Component {
constructor() {
    super();
    this.state = {
        questions: Questions
    }

}

Game() {
    const { questions } = this.state;
    const item = questions[Math.floor(Math.random() * questions.length)];
    const items = [item.a, item.b, item.c, item.d];
    console.log('Working');
    return (
        <div>
            <GameParagraph value={item.ques} />
            {
                items.map(quest => (
                    <div key={quest}>
                        <div>
                            <GameButton 
                                value={quest}
                                onClick={() => {
                                    if(item.ans === quest) {
                                        return console.log('Working');
                                    } else {
                                        return console.log('not working')
                                    }
                                }}
                            />
                        </div>
                    </div>
                ))
            }
        </div>
    )
}


render() {
    return (
        <StartGame 
            onClick={() => this.Game()}
        />
    );
}

}

And that's the button to call the Game():

class StartGame extends React.Component {
render() {
    return (
        <button onClick={this.props.onClick}>Start</button>
    );
}

}

Answer 1

You can try like this:

class QuizGame extends React.Component {
    constructor() {
        super();
        this.state = {
            questions: Questions,
            hasGameStarted: false
        }
    
    }
    
    Game() {
        const { questions } = this.state;
        const item = questions[Math.floor(Math.random() * questions.length)];
        const items = [item.a, item.b, item.c, item.d];
        console.log('Working');
        return (
            <div>
                <GameParagraph value={item.ques} />
                {
                    items.map(quest => (
                        <div key={quest}>
                            <div>
                                <GameButton 
                                    value={quest}
                                    onClick={() => {
                                        if(item.ans === quest) {
                                            return console.log('Working');
                                        } else {
                                            return console.log('not working')
                                        }
                                    }}
                                />
                            </div>
                        </div>
                    ))
                }
            </div>
        )
    }
    
    startGameClicked() {
       this.setState({hasGameStarted: true});
    }
    
    render() {
        return (
            <StartGame 
                onClick={this.startGameClicked}
            />
           {this.state.hasGameStarted ? this.Game() : null}
    
        );
    }

Make sure you are binding the onClick event in StartGame component properly.

Answer 2

You need to refactor your code. Returning JSX from an event handler (which is what your function Game is) won't cause your component to render.

Instead, the "React" way to handle this is to provide some state variable that can be updated by the super class to cause a render. i.e.

class QuizGame extends React.Component {
    constructor() {
        super();
        this.state = {
             started: false,
             questions: Questions
        }

    }

    startGame() { // JavaScript functions should be camelCase
        this.setState({started: true});
    }


    render() {
        if (this.state.started) {
            return const { questions } = this.state;
            const item = questions[Math.floor(Math.random() * questions.length)];
            const items = [item.a, item.b, item.c, item.d];

            return (
                <div>
                    <GameParagraph value={item.ques} />
                        {items.map(quest => (
                            <div key={quest}>
                                <div>
                                    <GameButton 
                                        value={quest}
                                        onClick={() => {
                                            if(item.ans === quest) {
                                                return console.log('Working');
                                            } else {
                                                return console.log('not working')
                                            }
                                        }}/>
                                </div>
                            </div>
                        ))}
                </div>);
        } else {
            return <StartGame onClick={() => this.startGame()} />;
        }
    }
}