Showing / Hiding components on click based on current state in ReactJS

Question

Disclaimer: I am new to ReactJS

I am trying to implement a dialog window to select a country/language at on the first page of my application.

The idea is the following:

There is a small flag button on the top right corner that the user can click (CountryFlag)
When clicked, a dialog (Dialog) shows with 5 countries (flags), and for each country, 2 possible language selection. Choosing a country (for instance LA) and language (for instance lo) results in a specific locale, for instance lo-LA.

My dialog box initially looks like this:

After clicking on the Vietnamese flag it should changes into this:

After clicking on the country flag, I want two buttons (divs) to appear on the right of the flag so that the user can choose a language. So I am trying to conditionally add the divs based on the current state corresponding to the selected language:


{ this.state.countrySelected==="KH" ? ភាសាខ្មែរ : null }
{ this.state.countrySelected==="KH" ? English : null }

However, it does not work, there is an error when the dialog box opens, as if the onClick event was triggered already and creating 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.

Here 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(
            
                
                    Country > Language
                    
                    { this.state.countrySelected==="KH" ? ភាសាខ្មែរ : null }
                    { this.state.countrySelected==="KH" ? English : null }

                    
                    { this.state.countrySelected==="LA" ? ພາສາລາວ : null }
                    { this.state.countrySelected==="LA" ?English : null }

                    
                    { this.state.countrySelected==="MM" ? မြန်မာ : null }
                    { this.state.countrySelected==="MM" ? English : null }

                    
                    { this.state.countrySelected==="TH" ? ภาษาไทย : null }
                    { this.state.countrySelected==="TH" ? English : null }

                    
                    { this.state.countrySelected==="VN" ? Tiếng việt : null }
                    { this.state.countrySelected==="VN" ? English : null }
                
            
        );  
    }
});

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

    return (
        
    );
};

class CountryFlag  extends React.Component {
    render() {
        return (
            
        );
    }
}

export default CountryFlag;

Any idea why I have this error?

Thanks!

glhrmv · Accepted Answer

When you do

onClick={this.selectCountry("KH")}

You're actually calling the function, and not storing a reference to the click handler so that it only fires when clicked. You can either do

onClick={() => this.selectCountry("KH")}

or even better, make a bound function that passes in the country name, like so

onClick={this.selectCountry.bind(this, "KH")}

However, since you have data- attributes in those elements that you're clicking on, you can put just onClick={this.selectCountry} and in the selectCountry handler, you can rewrite it like so

selectCountry(e) {
  let country = e.currentTarget.dataset.country;
  // country will be "KH" for example
}

Showing / Hiding components on click based on current state in ReactJS

Answers (2)

Related Questions