0

Im moving my project to react, and im having problems with my scroll function.

error

I think my problem will be in my .js and it doesnt recognize #section:

var offsetSection = $('#' + 'section_' + value).offset().top - 83;

In my .html

<body>
    <div id="root"></div>   
</body>

<script >
var sectionArray = [1, 2, 3];

$.each(sectionArray, function(index, value){          
     $(document).scroll(function(){
         var offsetSection = $('#' + 'section_' + value).offset().top - 83;
         var docScroll = $(document).scrollTop();
         var docScroll1 = docScroll + 1;
                 
         if ( docScroll1 >= offsetSection ){
             $('.navbar-nav .nav-item .nav-link').removeClass('active');
             $('.navbar-nav .nav-item .nav-link:link').addClass('inactive');  
             $('.navbar-nav .nav-item .nav-link').eq(index).addClass('active');
             $('.navbar-nav .nav-item .nav-link').eq(index).removeClass('inactive');
         }        
     });   
    $('.click-scroll').eq(index).click(function(e){
        var offsetClick = $('#' + 'section_' + value).offset().top - 83;
        e.preventDefault();
        $('html, body').animate({
            'scrollTop':offsetClick
        }, 300)
    });    
});
$(document).ready(function(){
    $('.navbar-nav .nav-item .nav-link:link').addClass('inactive');    
    $('.navbar-nav .nav-item .nav-link').eq(0).addClass('active');
    $('.navbar-nav .nav-item .nav-link:link').eq(0).removeClass('inactive');
});
</script>

In my .tsx

<nav className="navbar navbar-expand-lg">
  <div className="container">                    
      <div className="collapse navbar-collapse" id="navbarNav">
          <ul className="navbar-nav align-items-lg-center ms-auto me-lg-5">
              <li className="nav-item">
                  <a className="nav-link click-scroll" href="#section_1">Home</a>
              </li>
              <li className="nav-item">
                  <a className="nav-link click-scroll" href="#section_2">About</a>
              </li>
              <li className="nav-item">
                  <a className="nav-link click-scroll" href="#section_3">Ecosystem</a>
              </li>           
          </ul>
      </div>
  </div>
</nav>

Example to call the section:

<a className="nav-link click-scroll" href="#section_2">About</a>

<section className="about-section section-padding" id="section_2">  
</section>

I appreciate any help!

Migk
  • 1
  • 1
  • When the error occurs, what is the runtime value of `'#' + 'section_' + value`? Just at a glance... Your array has 6 elements, but your HTML has 3. So I'd fully expect the fourth element in the array to not be found in the HTML. – David May 11 '23 at 21:55
  • Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. – Community May 11 '23 at 22:01
  • @David, I only put 3 for the example, in fact I have 6(edit). how can i see runtime value? – Migk May 11 '23 at 22:03
  • @Migk: *"how can i see runtime value?"* - This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). Modern browsers have debugging tools built-in, including a "script debugger" in which you can set breakpoints to step through your code. When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? – David May 11 '23 at 22:04
  • @Migk: Taking a step back... *"Im moving my project to react"* - The code shown is all jQuery, not React. If you're trying to directly interact with the DOM in React then you're **probably** doing something wrong. There are cases where that can work, but you have to know what you're doing. If the goal is to implement the functionality in React then start by implementing the functionality in React. Don't just add **some** React code and then copy/paste the jQuery code and expect it to work. They're fundamentally different. – David May 11 '23 at 22:07
  • @David thanks Ill check, the error is only displayed when I scroll page – Migk May 11 '23 at 22:10

0 Answers0