Uncaught TypeError: Cannot read properties of null (reading 'offsetTop')

Question

I was trying to create a scroll effect. When you click on the options on the navbar, we go to a specific section.

Why am I getting this error?

This is the code where the error is coming:

import React, { useRef } from 'react'
export default function Home() {
    const about = useRef(null);
    const work = useRef(null);
    const contact = useRef(null);

    const scrollSection = (elementRef) => {
        window.scrollTo({
          top: elementRef.current.offsetTop,
          behavior: "smooth",
        });
      };
    return (
        <>
            <div ref={about} className='first'>
                <nav className="navbar">

                    <div className="logo">
                        <video loop autoPlay muted playsInline className='logo_video' >
                            <source src={video} type="video/mp4" />
                        </video>
                    </div>
                    <div className="about_section">
                        <ul className="list">
                            <li className="info about">
                                <div className="infoindex" onClick={() => scrollSection(about)}>
                                    About
                                </div>
                            </li>
                            <li className="info">
                                <div className="infoindex" onClick={scrollSection(work)}>
                                    Work

                                </div>
                            </li>
                            <li className="info">
                                <div className="infoindex" onClick={scrollSection(contact)}>
                                    Contact

                                </div>
                            </li>
                        </ul>
                    </div>

                </nav>

What are some edits I can do to this code?

Answer 1

1. You are not passing work and contact refs to elements as you are doing with the about ref. They are never being set, and this is why you are getting null current.

2. You should not call the scrollSection directly in the onClick, but rather pass a callback function that executes when the div is clicked:

   <div className="infoindex" onClick={() => scrollSection(work)>Work</div>
   

   and

   <div className="infoindex" onClick={() => scrollSection(contact)}>Contact</div>
   

Answer 2

Take a look to the following lines of code:

<div className="infoindex" onClick={() => scrollSection(about)}>
<div className="infoindex" onClick={scrollSection(work)}>
<div className="infoindex" onClick={scrollSection(contact)}>

Now you can see the difference. scrollSection(work) and scrollSection(contact) are triggering the scrollSection function in each render even if you don't click them. Don't forget to add the arrow function to them.

<div className="infoindex" onClick={() => scrollSection(about)}>
<div className="infoindex" onClick={() => scrollSection(work)}>
<div className="infoindex" onClick={() => scrollSection(contact)}>

By the way, you are only handling the about reference at the div parent:

<div ref={about} className='first'>

You need to handle the rest of references too and don't forget the onClick event. If your about div wraps the rest of the divs, then it could have unwanted behaviors if you want to click the child divs inside the parent div.