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

[aditi-gawli]

There's a same case I want to implement

[MForMarlon]

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.

[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