Как в реакт вешать разный онклик в зависимости от текущего state?

Question

[Кирилл]

Только начал трогать react и пытаюсь сделать мобильное меню, которое должно открываться и закрываться по клику на кнопку бургера, а также закрываться по клику вне меню.

Для обработки клика вне элемента взял компонент от airbnb OutsideClickHandler, который оборачивает компонент, клик вне которого и отлавливается и дальше передает в state false. А нажатие по бургеру тоглит state. Проблема в том, что лежит вне меню и когда я нажимаю при открытом меню на бургер, то state меняется на false из-за OutsideClickHandler и сразу обратно на true из-за нажатия на бургер.

Я подумал, что можно решить следующим способом: Если state = true (меню открыто), то передавать бургеру onclick функцию, которая делает state = false, а если state = false, то наоборот. Может как-то можно в реакт вешать разный онклик в зависимости от текущего state? Или есть вообще другие более простые решения моей проблемы? Спасибо за любые советы.

компонент Nav (несколько сокращенный)

const Nav = (props) => {

    const [burgerState, setBurgerState] = useState(false);

    const changeBurger = () => {
      setBurgerState(!burgerState);
    };
    
    return (
      <nav className="nav nav--theme-dark">
          <Burger onClick={changeBurger} burgerState={burgerState} />
        <ul className="nav__list">
          <li className="nav__item nav__item--more">
            <a className="nav__link nav__link--drop nav__link--theme-dark">
              {data.additionalName}
            </a>
            <OutsideClickHandler onOutsideClick={() => {setBurgerState(false)}}>
              <div className={cn("nav__drop js-drop", {'is-open' : burgerState === true})}>
                  меню
              </div>
            </OutsideClickHandler>
          </li>
        </ul>
      </nav>
    );
};

Компонент бургер

const Burger = ( {onClick, burgerState} ) => {
  console.log(burgerState)
  return (
    <button className={cn("burger nav__burger", {'is-open' : burgerState === true})} onClick={onClick}>
      <span className="burger__line" />
    </button>
  );
};

Answer 1

[Андрей Пастухов]

1) changeBurger заверните в useCallback

const changeBurger = useCallback(() => {
  setBurgerState(!burgerState);
}, [burgerState]);

2) Судя по доке OutsideClickHandler - есть пропс disabled, который должен помочь

Comments

[Кирилл]

Спасибо, это помогло. После столкнулся со следующей проблемой: сразу под header, где находится бургер, у меня слайдер во всю страницу (swiper react) и по неизвестной причине когда кликаю в области компонента слайдера clickOutside не работает, вообще непонятно почему. Попробую поискать другие решения обработки внешних кликов.