classListのエラー

Question

実現したいこと

className="humberger"をクリックしたときに、className="header"にclassName="active"を追加、削除する。

発生しているエラーメッセージ

    at toggle (Header.js:14:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)
    at react-dom.development.js:9288:1

該当のソースコード

import React from "react";
import "./Header.css";
import { Link as Scroll } from "react-scroll";
import { useState } from "react";

const Header = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);
  let header = document.querySelector(".header");
  const toggle = () => {
    if (isNavOpen) {
      header.classList.remove("active");
      setIsNavOpen(false);
    } else {
      header.classList.add("active");
      setIsNavOpen(true);
    }
  };

  return (
    <div className="header">
      <nav>
        <ul>
          <li>
            <Scroll to="about" smooth="true" duration={600} offset={-60}>
              ABOUT
            </Scroll>
          </li>
          <li>
            <Scroll to="skill" smooth="true" duration={600} offset={-60}>
              SKILL
            </Scroll>
          </li>
          <li>
            <Scroll to="portfolio" smooth="true" duration={600} offset={-60}>
              PORTFOLIO
            </Scroll>
          </li>
        </ul>
      </nav>

      <div className="hamburger" onClick={toggle}>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  );
};

export default Header;

Comments

[myydre]

エラーメッセージに抜けがありました。
１行目　Uncaught TypeError: Cannot read properties of null (reading 'classList')

at toggle (Header.js:14:1)～

Answer 1

そもそも論ですが、Reactで表示しているエレメントを、DOMで操作すべきではありません。Reactの枠内で処理しましょう。

<div className={"header " + (isNavOpen ? "active" : "") }>

Comments

[maisumakun]

toggle = () => setIsNavOpen(current => !current)

[myydre]

ありがとうございます。
この方法で解決しました！