Add active class name doesn't work if component containing data-to-scrollspy-id is in a nested component

[Angeline Kwan]

@pettiboy Such a life saver react component! Thank you so much.

I debugged with the onUpdateCallback and it is returning the matching id as the link <a data-to-scrollspy-id>
<ScrollSpy scrollThrottle={100} onUpdateCallback={(id: string) => console.log(id)}>

However, the link didn't get class name active-scroll-spy added.
I had similar setup as your demo-app except my <nav> is nested inside another component <hero>

<hero>
  <nav> -> would not work
    <a class="other-classname" data-to-scrollspy-id="section-1">Section 1</a>
    <a class="other-classname" data-to-scrollspy-id="section-2">Section 2</a>
  </nav>
</hero>
<ScrollSpy>
    <div id="section-1">Section 1</div>
    <div id="section-12">Section 2</div>
</ScrollSpy>

How could i make this work with nested component?
Thanks in advance. Appreciate your help.

[Hussain Pettiwala]

Hi @angelinekwan, thank you for your kind words!

To make this work with nested component you can use the navContainerRef prop.

And your code would look something like:

<hero>
  <nav ref={refName}> 
    <a class="other-classname" data-to-scrollspy-id="section-1">Section 1</a>
    <a class="other-classname" data-to-scrollspy-id="section-2">Section 2</a>
  </nav>
</hero>
<ScrollSpy navContainerRef={refName} >
    <div id="section-1">Section 1</div>
    <div id="section-2">Section 2</div>
</ScrollSpy>

[Angeline Kwan]

@pettiboy Thanks for the suggestion! Keep up the good work!