Disclosure: I am still getting familiar with ReactJS

I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application.

Here's the concept:

• There's a small flag button in the top right corner that users can click (CountryFlag)
• Upon clicking, a dialog box (Dialog) pops up displaying 5 countries (flags), each with 2 language options. Choosing a country (e.g. LA) and language (e.g. lo) results in a specific locale, like lo-LA.

Initially, my dialog box looks like this:

https://i.stack.imgur.com/BQ5GZ.png

After clicking on the Vietnamese flag, it is expected to change to this:

https://i.stack.imgur.com/ZV3rb.png

When the country flag is clicked, I intend for two buttons (divs) to appear at the right side of the flag for selecting a language. To achieve this, I am trying to conditionally add the divs based on the current state associated with the selected language:

<div className="Country-flag-big" onClick={this.selectCountry("KH")} data-country={"KH"} />
{ this.state.countrySelected==="KH" ? <div className="Language-big" onClick={this.selectLocale} data-locale={"km-KH"} >ភាសាខ្មែរ</div> : null }
{ this.state.countrySelected==="KH" ? <div className="Language-big" onClick={this.selectLocale} data-locale={"en-KH"} >English</div> : null }

However, there seems to be an issue as the dialog box opens, almost as if the onClick event has already been triggered and causing a conflict:

Warning: setState(...): Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

Below is the complete component code:

import React from 'react';
import ReactDOM from 'react-dom';
import './CountryFlag.css';

var Dialog = React.createClass({
    getInitialState: function () {
        return { countrySelected: "" };
    },

    close(){
        ReactDOM.unmountComponentAtNode(this.props.container);
    },

    componentWillUnmount() {
        document.body.removeChild(this.props.container); 
    },

    selectCountry(country) {
        console.log('this is c:', country);
        this.setState({countrySelected: country});
    },

    selectLocale() {
        console.log('this is:', this);
        ReactDOM.unmountComponentAtNode(this.props.container);
    },

    render(){
        return(
            <div className="Country-dialog-overlay">
                <div className="Country-dialog-inner">
                    <h2>Country > Language</h2>
                    <div className="Country-flag-big" onClick={this.selectCountry("KH")} data-country={"KH"} />
                    { this.state.countrySelected==="KH" ? <div className="Language-big" onClick={this.selectLocale} data-locale={"km-KH"} >ភាសាខ្មែរ</div> : null }
                    { this.state.countrySelected==="KH" ? <div className="Language-big" onClick={this.selectLocale} data-locale={"en-KH"} >English</div> : null }

                    <div className="Country-flag-big" onClick={this.selectCountry("LA")} data-country={"LA"} />
                    { this.state.countrySelected==="LA" ? <div className="Language-big" onClick={this.close} data-locale={"lo-LA"} >ພາສາລາວ</div> : null }
                    { this.state.countrySelected==="LA" ?<div className="Language-big" onClick={this.close} data-locale={"en-LA"} >English</div> : null }

                    <div className="Country-flag-big" onClick={this.selectCountry("MM")} data-country={"MM"} />
                    { this.state.countrySelected==="MM" ? <div className="Language-big" onClick={this.close} data-locale={"my-MM"} >မြန်မာ</div> : null }
                    { this.state.countrySelected==="MM" ? <div className="Language-big" onClick={this.close} data-locale={"en-MM"} >English</div> : null }

                    <div className="Country-flag-big" onClick={this.selectCountry("TH")} data-country={"TH"} />
                    { this.state.countrySelected==="TH" ? <div className="Language-big" onClick={this.close} data-locale={"th-TH"} >ภาษาไทย</div> : null }
                    { this.state.countrySelected==="TH" ? <div className="Language-big" onClick={this.close} data-locale={"en-TH"} >English</div> : null }

                    <div className="Country-flag-big" onClick={this.selectCountry("VN")} data-country={"VN"} />
                    { this.state.countrySelected==="VN" ? <div className="Language-big" onClick={this.close} data-locale={"vi-VN"} >Tiếng việt</div> : null }
                    { this.state.countrySelected==="VN" ? <div className="Language-big" onClick={this.close} data-locale={"en-VN"} >English</div> : null }
                </div>
            </div>
        );  
    }
});

var Trigger = () => {
    function showDialog() {
        var div = document.createElement('div');
        ReactDOM.render(
            <Dialog container={div}/>,
            document.body.appendChild(div)
        );
    }

    return (
        <div className="Country-flag" onClick={showDialog} data-country={"VN"} />
    );
};

class CountryFlag  extends React.Component {
    render() {
        return (
            <Trigger />
        );
    }
}

export default CountryFlag;

Any insights into why this error is occurring?

Appreciate your help!