How to access ReactJS DOM elements using JQuery

Question

I am trying to get the height of the header element using Jquery's height() method. But it gives NAN when I console the values

Here's my react snippet

import React, { Component } from "react";
import $ from 'jquery'; //un-used

export default class HomepageNavigationBar extends Component {

  render() {
    return (
      <header className="header_area">
        <div className="main_menu">
          <nav className="navbar navbar-expand-lg navbar-light">
            <div className="container">
              <a className="navbar-brand logo_h" href="index.html">
                <img src="img/logo.png" alt="" />
              </a>
              <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="icon-bar" /> <span className="icon-bar" />
                <span className="icon-bar" />
              </button>
              .
              .
              .
              //dots used to denote that code further exists but to make this minimal I have removed them.
        </div>
      </header>
    );
  }
}

and here's my external theme.js file

(function($) {
  "use strict";

  var nav_offset_top = $("header").height() + 50;

  console.log(nav_offset_top); //gives 'NAN' when console, even after I scroll

  function navbarFixed() {
    if ($(".header_area").length) {
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= nav_offset_top) {
          alert('Hi');
          $(".header_area").addClass("navbar_fixed");
        } else {
          alert('no Hi');
          $(".header_area").removeClass("navbar_fixed");
        }
      });
    }
  }
  navbarFixed();  
})(jQuery);

Problems are:

1)

 console.log(nav_offset_top);

this above code gives NAN when console the value even after I scroll the page up and down

2)

$(".header_area").length

header_area length is always 0 even after I scroll up and down the page

Can someone here help me out?

Answer 1

I believe you're getting NaN because you're accessing header when it is not yet rendered.

Put your code in componentDidMount() instead to make sure that elements are rendered before accessing it.

Read more: https://reactjs.org/docs/react-component.html#componentdidmount

The docs state that:

Initialization that requires DOM nodes should go here.

This is exactly what you're doing, accessing DOM nodes using jQuery.

class HomepageNavigationBar extends React.Component {
  componentDidMount() {
    var nav_offset_top = $("header").height() + 50;

    console.log(nav_offset_top);
    
    function navbarFixed() {
    if ($(".header_area").length) {
      $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= nav_offset_top) {
          alert('Hi');
          $(".header_area").addClass("navbar_fixed");
        } else {
          alert('no Hi');
          $(".header_area").removeClass("navbar_fixed");
        }
      });
    }
  }
  navbarFixed();  
  }
  render() {
    return (
      <header className="header_area">
        <div className="main_menu">
          <nav className="navbar navbar-expand-lg navbar-light">
            <div className="container">
              <a className="navbar-brand logo_h" href="index.html">
                <img src="img/logo.png" alt="" />
              </a>
              <button
                className="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <span className="icon-bar" /> <span className="icon-bar" />
                <span className="icon-bar" />
              </button>
            </div>
          </nav>
        </div>
      </header>
    );
  }
}

ReactDOM.render(<HomepageNavigationBar />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" style="height: 1000px;"></div>