context_change.js

import React, { useState } from 'react';

const languages = { en: 'en', fr: 'fr' };
const initialTheme = { colour: 'blue', lang: languages.en, setLanguage: () => {} };
const { Provider: AppProvider, Consumer: AppConsumer } = React.createContext(initialTheme);

const App = () => {

    const setLanguage = (lang) => {
        setTheme({ ...theme, lang: lang });
    }

    const [theme, setTheme] = useState({...initialTheme, setLanguage: setLanguage});

    return (
        <AppProvider value={theme}>
            <LanguagePicker />
            <Menu />
        </AppProvider>
    );
}

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

const LanguagePicker = () =>
    <AppConsumer>
        {context =>
            <div>
                <button onClick={() => context.setLanguage(languages.en)}>English</button>
                <button onClick={() => context.setLanguage(languages.fr)}>French</button>
            </div>
        }
    </AppConsumer>

const MenuItem = () =>
    <AppConsumer>
        { value =>
            <div>
                <p>Theme colour: {value.colour}</p>
                <p>Locale: {value.lang}</p>
            </div>
        }
    </AppConsumer>

export default App;