An error occurred while attempting to access the 'classList' property in React due to null values

Question

An error occurred while attempting to access the 'classList' property in React due to null values

Seeking assistance with altering the background color of a header upon scroll. I keep receiving null when trying to reference the navbar variable. Any suggestions on how I can achieve this effect? Utilizing transform:translateY for a subtle scroll animation.

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

https://i.sstatic.net/LnPy3.png

javascript css reactjs bootstrap-4 react-bootstrap

Answer 1

Answer №1

It seems like your approach may not align with the recommended React methodology. In order to access the navbar element, it is advisable to utilize the useRef hook. This will provide a straightforward reference to the element throughout the component's lifecycle.

In addition to that, there are several other issues that require attention:

The variable scrolled is declared using useState, but it does not seem to be utilized properly.
Your scroll listener should be implemented within a useEffect. Currently, your code is setting a new listener on each re-render of the component, which is not ideal. It should only be set once.
The cleanup for your scroll listener is missing.

I've made some modifications to the code that I believe will address these concerns effectively.

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;

Answer 2

It seems like your approach may not align with the recommended React methodology. In order to access the navbar element, it is advisable to utilize the useRef hook. This will provide a straightforward reference to the element throughout the component's lifecycle.

In addition to that, there are several other issues that require attention:

The variable scrolled is declared using useState, but it does not seem to be utilized properly.
Your scroll listener should be implemented within a useEffect. Currently, your code is setting a new listener on each re-render of the component, which is not ideal. It should only be set once.
The cleanup for your scroll listener is missing.

I've made some modifications to the code that I believe will address these concerns effectively.

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;

Answer 3

Answer №2

Attempting to access the navbar before it's rendered will result in a null variable. Utilize Refs in React to interact with node elements directly. For additional information, check out this resource.

Answer 4

Attempting to access the navbar before it's rendered will result in a null variable. Utilize Refs in React to interact with node elements directly. For additional information, check out this resource.

Answer 5

Answer №3

It seems like you're not approaching this in a React-friendly manner. There are several ways to tackle this issue, one of which involves utilizing the useState hook to keep track of scrolling and updating it when the height changes. This way, you can easily switch between classNames using a ternary operator in JSX:

<div className={scrolled ? "color-nav" : "something"}>

Answer 6

It seems like you're not approaching this in a React-friendly manner. There are several ways to tackle this issue, one of which involves utilizing the useState hook to keep track of scrolling and updating it when the height changes. This way, you can easily switch between classNames using a ternary operator in JSX:

<div className={scrolled ? "color-nav" : "something"}>

An error occurred while attempting to access the 'classList' property in React due to null values

Answer №1

Answer №2

Answer №3

Similar questions

Using AJAX to send a POST request with the PHP $_FILES superglobal while preventing the default form submission with the onclick

Why won't angularjs interpret my object accurately?

How does assigning a checkbox's value as 'undefined' result in the addition of ng-invalid?

Tips on displaying Vue objects row by row

Footer obscures content above it

Tips for utilizing conditional CSS effectively in CakePHP 2.x

Move to Fieldset Upon Link Click

The function res.map() cannot be used in this context because res is an Array Object

Ways to remove the default classes added by ngbootstrap

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

JavaScript object properties and the concept of inheritance

Locating the DataGrid Component in Material-UI v5: A Guide on Installing DataGrid in React

Using JavaScript to assess the outcome of a form utilizing an if statement

React-app size has grown larger post-deployment

Uploading website to Azure: In order to view the latest version of the website [using ASP.NET and REACT], it is essential to clear the cached content

Flipping and expanding cards with CSS3

When utilizing a method that is not a class or prototype, the issue with Access-Control-Allow-Origin blocking the origin file:// does not occur

Combining Multiple Routes with Redirect using React Router

Bootstrap 4's mobile flexbox expends beyond the desired width

How about locking the initial column of a table and ensuring a uniform height with the header row configured to wrap any excess whitespace?