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

The simplest solution is to use optional chaining... headerRef.current?.classList.add() — Phil
– Phil, Commented Jul 25, 2023 at 23:06
I cannot reproduce the problem you're seeing ~ codesandbox.io/s/cranky-taussig-l4cdfd?file=/src/App.tsx. This answer indicates that refs should be set by the time your effect hook runs which seems to be the case in the sandbox — Phil
– Phil, Commented Jul 25, 2023 at 23:15

gibbers · Accepted Answer · 2023-07-25 23:16:49Z

-2

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.

answered Jul 25, 2023 at 23:16

gibbers

4841 gold badge5 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related