Country Guessing Game I'm learning React and I made this country guessing game. What improvements/suggestions do you have for it?
Preview it here
import React, {Component} from 'react';
import './Country.css';

class Country extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countries: [],
            randomCountry: {},
            randomOptions: [],
            userIsWin: '',
            disableFieldset: false,
            goodGuess: 0,
            bgColor: {backgroundColor: 'white'}
        }
        this.getRandomCountry = this.getRandomCountry.bind(this);
        this.checkWin = this.checkWin.bind(this);
    }

componentDidMount() {
    const apiUrl = &quot;https://restcountries.eu/rest/v2/all&quot;;
    fetch(apiUrl)
    .then(data =&gt; data.json())
    .then(countries =&gt; this.setState({countries}))
    .then(this.getRandomCountry)
}


getRandomCountry() {
    const random = this.state.countries[Math.floor(Math.random()*this.state.countries.length)];
    const randomOpt1 = this.state.countries[Math.floor(Math.random()*this.state.countries.length)];
    const randomOpt2 = this.state.countries[Math.floor(Math.random()*this.state.countries.length)];
    const randomOpt3 = this.state.countries[Math.floor(Math.random()*this.state.countries.length)];
    const randomOptions = [random.name, randomOpt1.name, randomOpt2.name, randomOpt3.name];
    randomOptions.sort(() =&gt; { return 0.5 - Math.random() });
    this.setState({
        randomCountry: random,
        randomOptions: randomOptions,
        userIsWin: '',
        disableFieldset: false
    })
}

checkWin(e) {
    this.setState({
        disableFieldset: true
    })
    const winCountry = this.state.randomCountry.name;
    const userGuess = e.target.value;
    if (winCountry === userGuess) {
        this.setState({
            userIsWin: 'Win',
            goodGuess: this.state.goodGuess + 1,
            bgColor: {backgroundColor: '#81C784'}
        })
    } else {
        this.setState({
            userIsWin: 'Lose',
            bgColor: {backgroundColor: '#FF8A65'}
        })
    }
    setTimeout(()=&gt;{
        this.getRandomCountry();
        this.setState({
            userIsWin: '',
            disableFieldset: false,
            bgColor: {backgroundColor: 'white'}
        })
        console.log(e.target)
    }, 2000)

}


render() {
    return (
        &lt;div className=&quot;main&quot; style={this.state.bgColor}&gt;
            &lt;div className=&quot;wrapper&quot;&gt;
                &lt;h1&gt;Country Guessing Game&lt;/h1&gt;
                &lt;button className=&quot;rnd mui-btn mui-btn--raised&quot; onClick={this.getRandomCountry}&gt;Random&lt;/button&gt;
                &lt;div className=&quot;img-container&quot;&gt;
                    &lt;img className=&quot;mui-panel&quot; src={this.state.randomCountry.flag} alt=&quot;Country flag&quot; /&gt;
                &lt;/div&gt;
                &lt;h2&gt;{this.state.userIsWin === 'Win' ? 'You guess right! ' : ''}
                    {this.state.userIsWin === 'Lose' ? 'You guess wrong. ' : ''} 
                    Score:{this.state.goodGuess}&lt;/h2&gt;
            &lt;/div&gt;
            &lt;fieldset disabled={this.state.disableFieldset}&gt;
                &lt;form onClick={e =&gt; this.checkWin(e)}&gt;
                    &lt;button className=&quot;mui-btn mui-btn--raised&quot; value={this.state.randomOptions[0]}&gt;{this.state.randomOptions[0]}&lt;/button&gt;
                    &lt;button className=&quot;mui-btn mui-btn--raised&quot; value={this.state.randomOptions[1]}&gt;{this.state.randomOptions[1]}&lt;/button&gt;
                    &lt;button className=&quot;mui-btn mui-btn--raised&quot; value={this.state.randomOptions[2]}&gt;{this.state.randomOptions[2]}&lt;/button&gt;
                    &lt;button className=&quot;mui-btn mui-btn--raised&quot; value={this.state.randomOptions[3]}&gt;{this.state.randomOptions[3]}&lt;/button&gt;
                &lt;/form&gt;
            &lt;/fieldset&gt;
        &lt;/div&gt;
    )
}
}

export default Country;
The screen design looks very nice. It is minimalistic, yet pleasing. It almost perfectly fits on the small screen of my phone (only sometimes, I have to scroll down to see all the answer buttons). The flags are nicely big to explore the fine graphical details. To appreciate the shape of the Nepal flag, there should be no border around it, and the background color could be set to something other than white, since that is used in some of the flags.

Bug: never sort using a random comparator. Instead, shuffle the array. This has been answered often already, just search for the above terms.

When reading the code aloud, "a country is a component" doesn't make sense. A country is something having a name and a flag, so the class should better be named CountryComponent.

Most JavaScript code can be rewritten to not use the this keyword or the bind function, which leads to clearer and simpler code. See this code review for an example.

In the setTimeout call, I prefer to extract the first argument into a named function, so that the setTimeout appears closer to the 2000:

function action() {}

setTimeout(action, 2000);


There should be a space between the label "Score:" and the score number.

When I play the quiz, my total score always stays at 0, so there must be something wrong. After each click on one of the answer buttons, the page becomes green or orange for about a second and is then reloaded, which explains that the score is reset and that the screen flickers. On the other hand, the Random button works fine, so there must be something that differs between those. (Tested with Firefox on Android.)