Как более элегантно изменить множество значений state на клик?

Question

[nivaech]

Есть выпадающее меню, которое открывается на клик. Их четыре штуки. И четыре boolean значения state для каждого из них.

state = {
 sidebarOpenMenu1: false,
 sidebarOpenMenu2: false,
 sidebarOpenMenu3: false,
 sidebarOpenMenu4: false,
}

Если их открывать поочередно, то предыдущее меню не закрывается, и они накладываются друг на друга. Проблема была решена грубым способом - индивидуальным условием, что если какое-то меню активно, то все другие должны закрыться:

handleSidebarOpenMenu1 = () => {
    this.setState({
         sidebarOpenMenu1: !this.state.sidebarOpenMenu1,
         sidebarOpenMenu2: false,
         sidebarOpenMenu3: false,
         sidebarOpenMenu4: false,
    })
}

handleSidebarOpenMenu2 = () => {
    this.setState({
         sidebarOpenMenu1: false,
         sidebarOpenMenu2: !this.state.sidebarOpenMenu2,
         sidebarOpenMenu3: false,
         sidebarOpenMenu4: false,
    })
}
...

И так далее для четырех пунктов меню.
Есть ли более элегантный способ решения проблемы без систематического копирования?

Comments

[Шохрух Шаймардонов]

Ну в первую очередь на ум приходит идея переписать брутфорс метод на более лаконичный, с помощью .map()

[Петр Мухуров]

const menuItems = [{ key: "1" }, { key: "2" }, { key: "3" }];

...
  state = {
    activeKey: ""
  };
  handleSidebarOpenMenu = activeKey => this.setState({ activeKey });
...
  render() {
    return (
      <Menu activeKey={this.state.activeKey}>
        {map(menuItems, item => (
          <MenuItem
            active={this.state.activeKey === item.key}
            {...item}
            onClick={() => this.handleSidebarOpenMenu(item.key)}
          />
        ))}
      </Menu>
    );
  }
}

Answer 1

[0xD34F]

Вместо состояния всех элементов храните имя/id/индекс открытого:

state = {
  opened: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ opened }) => ({
    opened: opened === name ? null : name,
  }));
}

https://jsfiddle.net/bexgm6uz/