Передача paremeter в потребителя, чтобы изменить значение контекста

Question

У меня большие трудности с этим в течение нескольких дней. Как изменить значение контекста во вложенном компоненте внутри оболочки поставщика.

Например:

Поставщик:

  <MapThemeContext.Provider value={this.state}>
    <div className="App">
      <Dashboard/>
    </div>
  </MapThemeContext.Provider>

, где this.state (в том же компоненте, что и поставщик, к которому предоставлен)

    this.state = {
      theme : themes.silver,
      handleMapChange: this.handleMapChange,
    }
    this.handleMapChange = (style) => {
      if (style == "silver") {
        this.setState({
          theme : themes.silver
        });
      } else if (style == "dark") {
        this.setState({
          theme : themes.dark
        })
      } 
    }
  }

А глубоко внутри провайдера (вложенного в Dashboard) находится потребитель:

<MapThemeContext.Consumer>
  {({handleMapChange}) => (
    <div>
      <Button variant="contained" className={classes.button} onClick={e => handleMapChange('silver')}> // this does not work
        Silver
      </Button>
      <Button variant="contained" className={classes.button} onClick={handleMapChange}>
        Dark
      </Button>
    </div>
  )}
</MapThemeContext.Consumer>

Как при вызове метода внутри потребителя используется правильный параметр для установки значения контекста?

Кто-то снова в глубине души - это другой компонент, который использует этот контекст для темы, и он правильно использует значение по умолчанию. Я просто не понимаю, как изменить его на потребительской кнопке.

Содержание контекста:

export const themes = {
  silver: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
};

export const ThemeContext = React.createContext(
  theme: themes.silver,
  handleMapChange: () => {},
);

Answer 1

Можете ли вы заменить ниже два раздела и проверить один раз.

----------------------------- Section 1 -----------------------------
const isTheme = this.state.theme;

let buttonName = "dark";
if(isTheme == "silver"){
    buttonName = "silver";
}

<MapThemeContext.Consumer>
    <div>
        <Button variant="contained" className={classes.button} onClick={handleMapChange}>{buttonName}</Button>
    </div>
</MapThemeContext.Consumer>

----------------------------- Section 2 -----------------------------

this.handleMapChange = () => {
      const style = this.state.theme;
      if (style == "silver") {
        this.setState({
          theme : themes.dark 
        });
      } else if (style == "dark") {
        this.setState({
          theme : themes.silver
        })
      } 
    }
}