Cannot read properties of null (reading 'classlist') TypeError: Cannot read properties of null (reading 'classlist')

Question

This is the travel site I am trying to build. The code is as follow

import React, { useEffect, useRef } from "react";
import { Container, Row, Button } from "reactstrap";
import logo from "../../assets/images/logo.png";
import { Link, NavLink } from "react-router-dom";
import "./header.css";

const nav_links = [
  {
    path: "/home",
    display: "Home",
  },
  {
    path: "/about",
    display: "About",
  },
  {
    path: "/tours",
    display: "Tours",
  },
];

const Header = () => {
  // const headerRef = useRef(null);

  // const stickyHeaderFunc = () => {
  //   window.addEventListener("scroll", () => {
  //     if (
  //       document.body.scrollTop > 80 ||
  //       document.documentElement.scrollTop > 80
  //     ) {
  //       headerRef.current.classList.add("sticky__header");
  //     } else {
  //       headerRef.current.classList.remove("sticky__header");
  //     }
  //   });
  // };

  // useEffect(() => {
  //   stickyHeaderFunc();

  //   return () => {
  //     window.removeEventListener("scroll", stickyHeaderFunc);
  //   };
  // }, []);

  const headerRef = useRef(null);

  const stickyHeaderFunc = () => {
    if (
      document.body.scrollTop > 80 ||
      document.documentElement.scrollTop > 80
    ) {
      headerRef.current.classList.add("sticky__header");
    } else {
      headerRef.current.classList.remove("sticky__header");
    }
  };

  useEffect(() => {
    window.addEventListener("scroll", stickyHeaderFunc);

    return () => {
      // Clean up the event listener when the component is unmounted
      window.removeEventListener("scroll", stickyHeaderFunc);
    };
  }, []);

  return (
    <header className="header" ref={headerRef}>
      <Container>
        <Row>
          <div className="nav__wrapper d-flex align-items-center justify-content-between">
            {/* _______Logo_________ */}
            <div className="logo">
              <img src={logo} alt="" />
            </div>
            {/* _______End of Logo_________ */}
            {/* _______Menu_________ */}
            <div className="navigation">
              <ul className="menu  d-flex align-items-center gap-5">
                {nav_links.map((item, index) => (
                  <li className="nav__item" key={index}>
                    <NavLink
                      to={item.path}
                      className={(navClass) =>
                        navClass.isActive ? "active__link" : ""
                      }
                    >
                      {item.display}
                    </NavLink>
                  </li>
                ))}
              </ul>
            </div>
            {/* _______End of Menu_________ */}
            <div className="nav__right d-flex align-items-center gap-4">
              <div className="nav__btns d-flex align-items-center gap-4">
                <button className="btn secondary__btn">
                  <Link to="/login">Login</Link>
                </button>
                <button className="btn primary__btn">
                  <Link to="/Register">Register</Link>
                </button>
              </div>
              <span className="mobile__menu">
                <i class="ri-menu-line"></i>
              </span>
            </div>
          </div>
        </Row>
      </Container>
    </header>
  );
};

export default Header;

The error message is as follows:

Cannot read properties of null (reading 'classlist') TypeError: Cannot read properties of null (reading 'classlist') at http://localhost:3000/main.f7f4f4af7c19cb9b057e.hot-update.js:51:27

I am new to coding still a long way to go.. So please help

I am using to get the sticky bar with UseRef, not sure of the error message

Answer 1

You are trying to access the property classList on the ref object headerRef, which is null by default. The error code you listed is essentially telling you that you can't call null.classList because null can't have any properties.

In short, you need some additional logic to prevent your code from trying to access null.classList. Optional chaining would be the cleanest solution, e.g. headerRef.current?.classList, but there are a bunch of other ways to do it too.

You can also go into your useEffect and prevent stickyHeaderFunc from running unless headerRef.current exists.