Discussion on: Create section navigation with React and Intersection Observer

[Maciek Grzybek]

So it looks like you're not really storing anything in your refs object. As you can see in my example, ref needs to be attached to html element, like this:

 <div  ref={characterRef} />

If you want to get the ref from inside of some other component, you'll have to use forwardRef -> reactjs.org/docs/forwarding-refs.html

That's why you're getting errors

[thatFemicode]

Please is this an issue you could assist me in solving, just started using react of recent and i need this for the project.

[thatFemicode]

I'd be really grateful if you could assist me with this

[thatFemicode]

@maciekgrzybek can you please assist with this, i have literally tried everything i know nothing just works, been on it sice you told me about the forwardref and still not gotten anywhere

[Maciek Grzybek]

Sorry mate, I wish I could help but I'm really busy with my other projects. Everything you need to know should be in this article, basically ref needs to be attached to an actual dom element and currently you just passing them to the components. Some more reading ->

• reactjs.org/docs/refs-and-the-dom....
• blog.logrocket.com/a-guide-to-reac...
• felixgerschau.com/react-forwardref...

[thatFemicode]

Thanks, I'd look for an alternative if i cant find a solution, really appreciate 🙏

[thatFemicode]

Hi there @maciekgrzybek sorry for disturbing you agai, i found a way to make the scrolling to each section work but then i cant make the io and the active class work, could you please assit me with that in your free time. Here is a codepen link
codesandbox.io/s/eager-agnesi-virvq

[Maciek Grzybek]

Hey man, sorry wasn't here for a while, did you manage do sort this out?

[thatFemicode]

Sort of, found another way but your method looked really nice also wish I could have broken it down better
Here is a link to what I did with it
nba-landing.netlify.app/

[Maciek Grzybek]

You were really close, you just didn't pass the correct name to activeCharacter state :)

[thatFemicode]

Sorry could you do that and let me see where I made the mistake,probably fork the sandbox and send an updated link. Happy holidays

[Maciek Grzybek]

In this useEffect:

  useEffect(() => {
    const observerConfig = {
      rootMargin: `-${
        pageHeight % 2 === 0 ? observerMargin - 1 : observerMargin
      }px 0px -${observerMargin}px 0px`,
    };
    const handleIntersection = function (entries) {
      entries.forEach((entry) => {
        if (entry.target.id !== activeCharacter && entry.isIntersecting) {
          setActiveCharacter(entry.target.id);
        }
      });
    };
    const observer = new IntersectionObserver(
      handleIntersection,
      observerConfig
    );
    // observer.observe(refs.name);
    return () => observer.disconnect(); // Clenaup the observer if component unmount.
  }, [
    activeCharacter,
    setActiveCharacter,
    observerMargin,
    refs,
    items,
    pageHeight,
    name,
  ]);

You need to observe for each element, now you're not really observing anything. Notice how in my tutorial, each character is a separate component, and each one of them has its own Observer attached to it.

[thatFemicode]

I keep getting the husband error
Argument 1 ('target') to IntersectionObserver.observe must be an instance of Element

[thatFemicode]

Now I am observing for with refs.name but still getting that error

[thatFemicode]

Now I am observing with refs.name but still getting that error

[Maciek Grzybek]

There is no such a thing like refs.name in you code. Console log it and see what you are getting. If you want to access ref with specific name you need to access it with refs[name]. Also, you need to add a observer for each name.

[thatFemicode]

Thanks Maceik, i'll look at your approach again once i am free cus right now tbh i am not really getting what i am doing again cus i had to learn a lot two weeks ago