"Cannot read property 'classList' of null"

1

Hello everyone, I am having an unusual error that I can’t track down.
This is my code for my nav-bar
But when I click the navbar I get the error message that is in the title.
I have never really worked with react and vanilla JS together like this, so i am thinking it’s a simple mistake.
Thanks in advance for your expertise.


var bars = document.getElementById("nav-action");
var nav = document.getElementById("nav");
document.addEventListener("click", barClicked, false);
function barClicked() {
  bars.classList.toggle('active');
  nav.classList.toggle('visible');
}
export const Navigation = () => (
  <div
  className="homepage"
>
<div class="bars" id="nav-action">
  <span class="bar"> </span>
</div>

<nav id="nav">
  <ul>
    <li class="shape-circle circle-one"><a href="#">Contact</a></li>
    <li class="shape-circle circle-two"><a href="#">Blog</a></li>
    <li class="shape-circle circle-three"><a href="#">Work</a></li>
    <li class="shape-circle circle-five">
      <a href="#">Home</a>
    </li>
  </ul>
</nav>

  </div>
);
2

This is not very React-like. Do you have the full project code somewhere and can tell us the exact error (including filename and line number)?

1 Like
3

Thanks for your reply. I’ve actually gone a different route in solving this problem since I made this post. But I appreciate your help anyway.