No way to make active link on scroll in different components using .map()

[nicitaacom]

No way to make active link on scroll in different components using .map()
I want make something similar to this

I want here ser inView - category.id
And in Category.tsx I want create ref

But its write me that I redeclarete variable

[nicitaacom]

Here I want set inView

[thebuilder]

You can't use a hook inside a loop.

[nicitaacom]

You can't use a hook inside a loop.

I know man
But how I can create something similar to
https://user-images.githubusercontent.com/39565703/246155279-2104185d-81e4-4d14-90a8-e542907aa9b3.png

[nicitaacom]

It would be nice if you create quick YouTube video guide
Its not necessary

You may attach github repository with minimal example

[MForMarlon]

@nicitaacom Ok, here you go: https://codesandbox.io/p/sandbox/xenodochial-paper-jftsn2?file=%2Fsrc%2FApp.js%3A5%2C4-25%2C5

I did not implement link anchoring, but that is irrelevant.

[nicitaacom]

Work not properly

[MrBarracuda]

Hi, I know this is a few months old, but since no one replied with a solution, here is one way to solve it using your screenshot from MDN. First, the component layout:

<Page>
  <Links />
  <Content />
</Page>

Add a state in the Page component for the visible section: const [visibleSection, setVisibleSection] = useState('Description');

Pass the state as a prop into Links: <Links visibleSection={visibleSection} />

Inside the Links component, render the links style change using the prop:

<a href="#" className={visibleSection === 'Description'  ?  'active' : ''}>Description</a>
<a href="#" className={visibleSection === 'Example'  ?  'active' : ''}>Example</a>
<a href="#" className={visibleSection === 'Values'  ?  'active' : ''}>Values</a>

Now pass setVisibleSection as a prop into Content: <Content setVisibleSection={setVisibleSection} />

Then inside Content, set up separate useInView hooks for each section you want to observe, then assign the refs into the rendering part of Content when you want to trigger the style change.

const [descRef] = useInView({ ..., onChange: (inView) => inView && setVisibleSection('Description') })
const [exampleRef] = useInView({ ..., onChange: (inView) => inView && setVisibleSection('Example') })
const [valuesRef] = useInView({ ..., onChange: (inView) => inView && setVisibleSection('Values') })
...
<section ref={descRef} className="description-section">...</section>
<section ref={exampleRef} className="example-section">...</section>
<section ref={valuesRef} className="values-section">...</section>

Hope this helps.

is there any workaround to not use the hook multiple times? I have 15+ sections that needs that ref and wonder what would be the best approach to implement that

[thebuilder]

You could handle the useInView inside the <Link> component, and pass an onChange prop, that the <Link> can trigger when inView changes.

Then the parent component will be notified of links as they enter/leave the viewport, and can manage the state.