Обновление переменной состояния при нажатии, чтобы показать разные компоненты

Question

Я новичок в React и пытаюсь загрузить различные компоненты на основе переменных состояния. Я хочу, чтобы мой обработчик динамически знал, какую переменную состояния я обновляю. На данный момент я передаю имя состояния в виде строки.

Переменные состояния

state = {
        showLogin: false,
        showHome: false
    }

Метод обработчика

handleShow = (element) => this.setState({ element: true });

Кнопки

{
  !this.props.isAuthenticated ? (
    <Button
      variant="outline-primary"
      onClick={() => this.handleShow("showLogin")}
    >
      Login
    </Button>
  ) : (
    <>
      <Button
        variant="outline-primary"
        onClick={() => this.handleShow("showHome")}
      >
        Home
      </Button>
      <Button variant="outline-primary" onClick={this.authorizeUserMethod}>
        LogOut
      </Button>
    </>
  );
}

Answer 1

попробуйте

handleShow = element => this.setState({
    ...this.state, 
    [element]: true
});

Answer 2

В вашем методе обработчика вы должны использовать оператор распространения , это позволит вам создать клон вашего состояния и тем самым объединить новое значение.

Метод обработчика

handleShow = (element) => this.setState({ ...this.state, [element]: true });