StateAndContext.js

import React, { useState, useContext } from 'react';

const AppContext = React.createContext({});

const App = () => {
    const [lang, setLang] = useState('en');
    const [color, setColor] = useState('blue');

    const store = {
        lang: { get: lang, set: setLang },
        color: { get: color, set: setColor }
    };

    return (
        <AppContext.Provider value={store}>
            <LanguagePicker />
            <Menu />
        </AppContext.Provider>
    );
}

const Menu = () => <MenuItem />;

const LanguagePicker = () => {
    const context = useContext(AppContext);
    return (
        <div>
            <button onClick={() => context.lang.set('en')}>English</button>
            <button onClick={() => context.lang.set('fr')}>French</button>
        </div>  
    );
}

const MenuItem = () => {
    const context = useContext(AppContext);
    return (
        <div>
            <p>Theme colour: {context.color.get}</p>
            <p>Locale: {context.lang.get}</p>
        </div>   
    );
}

export default App;