Legacy global state using React

App.js

import React from 'react';

class App extends React.Component {
    state = { lang: 'en', color: 'blue' }

    changeLanguage = (lang) => {
        this.setState({...this.state, lang: lang});
    }

    render() {
        const { lang, color } = this.state;
        return (
            <div>
                <LanguagePicker changeLanguage={this.changeLanguage} />
                <Menu lang={lang} color={color} />
            </div>
        );
    }
}

class Menu extends React.Component {
    render() {
        const { lang, color } = this.props;
        return (
            <div>
                <Lang lang={lang} />
                <Color color={color} />
            </div>
        );
    }
}

class Lang extends React.Component {
    render() {
        return <p>Locale: {this.props.lang}</p>;
    }
}

class Color extends React.Component {
    render() {
        return <p>Color: {this.props.color}</p>;
    }
}

class LanguagePicker extends React.Component {
    render() {
        return(
            <div>
                <button onClick={() => this.props.changeLanguage('en')}>English</button>
                <button onClick={() => this.props.changeLanguage('fr')}>French</button>
            </div>
        );
    }
}

export default App;