Cannot read properties of null reading classlist ошибка

It should be <div className="dropdown"> instead of <div class="dropdown"> and <div id={styles.myDropdown} className={styles.dropdownContent}>

You would also avoid doing vanilla js inside a react/next app.

You would instead have a react state like this:

const [dropdownToggled, toggleDropdown] = useState(false);
  
const handleClick = () => {
  toggleDropdown(!dropdownToggled);
};

And have a condition on whether your jsx have a className hidden that sets display: none

something like this:

     <div
      className={`${styles.dropdownContent} 
      ${dropdownToggled ? styles.hidden : ""}`}
     >
       <a href="/">Link 1</a>
       <a href="/">Link 2</a>
       <a href="/">Link 3</a>
     </div>

To make the dropdown close when the user clicks outside, you would have a div like this:

<div
  className={styles.backdrop}
  onClick={() => toggleDropdown(true)}
></div>

that is styled like this:

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

Now since this div takes the whole screen and is positioned absolute when the user clicks anywhere on the page the onClick will fire and toggle the dropdown.

Working CodeSandbox.

В процессе разработки веб-приложений неизбежно возникают ошибки, которые могут привести к неправильной работе программы. Одной из таких ошибок является ошибка типа Uncaught TypeError: Не удается прочитать свойства null, читающие classList. Эта ошибка возникает, когда программа пытается прочитать свойства объекта, который имеет значение null или undefined. Данная ошибка связана с методом classList, который используется для работы с классами элементов HTML.

Возникновение ошибки типа Uncaught TypeError может быть вызвано несколькими причинами. Одна из причин — это неправильное обращение к элементу DOM. Например, если программа пытается прочитать свойство classList у элемента, который не существует на странице, то возникнет ошибка. Также, если программа пытается обратиться к элементу DOM до его полной загрузки, то класс элемента может быть еще не доступен и возникнет ошибка.

Например, следующий код может вызвать ошибку типа Uncaught TypeError: Не удается прочитать свойства null, читающие classList:

var element = document.getElementById("my-element");
element.classList.add("active");

Чтобы избежать ошибки типа Uncaught TypeError: Не удается прочитать свойства null, читающие classList, необходимо проверять, существует ли элемент перед обращением к его свойствам. Например, можно использовать условную конструкцию if, чтобы проверить, что элемент не равен null или undefined:

 
var element = document.getElementById("my-element");
if (element) {
element.classList.add("active");
}

Также стоит обратить внимание на правильную загрузку элементов DOM. Для этого можно использовать события onload или DOMContentLoaded, чтобы убедиться, что элементы полностью загрузились перед их использованием.

Важно отметить, что ошибка типа Uncaught TypeError может возникать не только при работе с методом classList. Она может возникать также и при работе с другими свойствами объектов. Поэтому при разработке веб-приложений необходимо быть внимательным и аккуратным, чтобы избегать подобных ошибок и обеспечить бесперебойную работу программы.

Uncaught TypeError (неперехваченная ошибка типа) является одной из наиболее распространенных ошибок, с которыми разработчики сталкиваются при написании JavaScript кода.

Эта ошибка возникает, когда попытка прочитать свойство или вызвать метод у значения, которое имеет тип null или undefined. Например:

var obj = null;
var myValue = obj.name; // Uncaught TypeError: Cannot read property 'name' of null

В данном примере, переменная obj имеет значение null, поэтому при попытке прочитать свойство name, возникает ошибка.

Чтобы избежать этой ошибки, необходимо проверить, что значение не является null или undefined, перед тем как пытаться использовать его:

var obj = null;
if (obj !== null) {
var myValue = obj.name;
}

Либо можно использовать оператор условного выполнения (?.), который позволяет избежать ошибки при попытке обращения к свойствам или методам объекта, если значение равно null или undefined:

var obj = null;
var myValue = obj?.name; // не вызовет ошибку

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

В заключение, ошибка Uncaught TypeError часто возникает при работе с JavaScript кодом, особенно при обращении к свойствам или методам объектов. Что бы избежать этой ошибки, необходимо аккуратно проверять значения на null или undefined перед использованием их свойств или методов.

Причина ошибки: Неудачное чтение свойств null

Во время работы с JavaScript вы можете столкнуться с ошибкой Uncaught TypeError: Не удается прочитать свойства null. Эта ошибка обычно возникает, когда вы пытаетесь получить доступ к свойству или методу объекта, которого нет.

Один из наиболее распространенных случаев возникновения этой ошибки — попытка доступа к свойству classList неопределенного значения. Свойство classList является свойством DOM-элемента и предоставляет доступ к его классам. Оно содержит методы для добавления, удаления и проверки наличия классов.

Однако, если попытаться получить доступ к свойству classList объекта со значением null или undefined, возникнет ошибка типа TypeError: Cannot read property ‘classList’ of null.

Вам может потребоваться подробнее исследовать ваш код, чтобы оценить почему значение null или undefined было передано или получено вместо ожидаемого объекта. Возможно, вы не правильно инициализировали переменные, вызвали функцию с некорректными аргументами, или сделали что-то еще неожиданное в вашем коде.

Есть несколько способов избежать этой ошибки при работе с объектами:

1. Всегда проверяйте значения переменных на null или undefined перед попыткой получения доступа к их свойствам или методам:

if (myVariable !== null && myVariable !== undefined) {
// Выполняйте код, использующий myVariable
}

1. Убедитесь, что вы корректно инициализируете переменные и объекты перед их использованием:

var myVariable = document.getElementById('myElement');
if (myVariable !== null) {
// Выполняйте код, использующий myVariable
}

1. Используйте условные операторы, чтобы избежать проблем с неопределенными значениями:

var myVariable = null;
 var myValue = myVariable

Issue

I am having this header which on scroll, I want to change the background to a different color.
The navbar variable returns null always. Why is it so? How can I do that?
The transform:translateY is just for a small animation on scroll.

import React from 'react'
import { Navbar, Container, Nav } from 'react-bootstrap'

import { LinkContainer } from 'react-router-bootstrap'

const Header = () => {

    const navbar = document.getElementById("navbar");
    let scrolled = false;

    window.onscroll = function () {
        if (document.body.scrollTop >= 200 || document.documentElement.scrollTop >= 200) {
            navbar.classList.add('color-nav');
            if (!scrolled) {
                navbar.style.transform = 'translateY(-70px)'
            }
            setTimeout(function () {
                navbar.style.transform = 'translateY(0px)'
                scrolled = true

            }, 200)
        } else {
            navbar.classList.remove('color-nav');
            scrolled = false
        }
    };

    return (
        <div id='navbar' >
            <Navbar fixed="top" className='navbar' collapseOnSelect expand="lg"  >
                <Container>
                    <LinkContainer to='/'>
                        <Navbar.Brand className='logo' >Logo</Navbar.Brand>
                    </LinkContainer>
                    <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                    <Navbar.Collapse id="responsive-navbar-nav">
                        <Nav className="me-auto">
                            <LinkContainer to='/services'>
                                <Nav.Link className='links'>Services</Nav.Link>
                            </LinkContainer>
                        </Nav>
                        <Nav>
                            <LinkContainer to='/login'>
                                <Nav.Link className='links'>Login</Nav.Link>
                            </LinkContainer>
                            <LinkContainer to='/signup'>
                                <Nav.Link className='links'>
                                    Sign Up
                                </Nav.Link>
                            </LinkContainer>
                        </Nav>
                    </Navbar.Collapse>
                </Container>
            </Navbar>
        </div >
    )
}

export default Header

You are going about things in what I’d like to call, «against the React way». To access the navbar element, you should be utilizing the useRef hook. This will give you an easy reference to that element through the components lifecycle.

On top of that, there are some other issues that need to be taken care of:

• The scrolled variable not being used with useState
• Your scroll listener not being set in a useEffect. Right now, your code would set a new listener on every re-render of your component. You want to just set it once.
• Your scroll listener not being cleaned up.

I’ve made some changes to the code that I would hope will fix this issue for you.

import React, { useState, useRef, useEffect } from "react";
import { Navbar, Container, Nav } from "react-bootstrap";

import { LinkContainer } from "react-router-bootstrap";

const Header = () => {
  const [scrolled, setScrolled] = useState(false);
  const navRef = useRef();

  useEffect(() => {
    const handleScroll = () => {
      if (
        document.body.scrollTop >= 200 ||
        document.documentElement.scrollTop >= 200
      ) {
        navRef.current.classList.add("color-nav");

        if (!scrolled) {
          navRef.current.style.transform = "translateY(-70px)";
        }

        setTimeout(function () {
          navRef.current.style.transform = "translateY(0px)";
          setScrolled(true);
        }, 200);
      } else {
        navRef.current.classList.remove("color-nav");
        setScrolled(false);
      }
    };

    window.addEventListener("scroll", handleScroll);

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

  return (
    <div id="navbar" ref={navRef}>
      <Navbar fixed="top" className="navbar" collapseOnSelect expand="lg">
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand className="logo">Logo</Navbar.Brand>
          </LinkContainer>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
            <Nav className="me-auto">
              <LinkContainer to="/services">
                <Nav.Link className="links">Services</Nav.Link>
              </LinkContainer>
            </Nav>
            <Nav>
              <LinkContainer to="/login">
                <Nav.Link className="links">Login</Nav.Link>
              </LinkContainer>
              <LinkContainer to="/signup">
                <Nav.Link className="links">Sign Up</Nav.Link>
              </LinkContainer>
            </Nav>
          </Navbar.Collapse>
        </Container>
      </Navbar>
    </div>
  );
};

export default Header;

Answered By — Dan Zuzevich