React.JS - I am trying to import functions from .js file into .jsx file, but it still doesn't work. Cannot read property 'click' of null'

Question

I am new to React and already set up my app. So far I am trying to create a header, which contains a menu, and carries over the whole website. I successfully did that after a lot of research. Now I am trying to do a more sophisticated menu - with hovering, etc. The only thing I can't do at the moment is that I can't make the classes active when they are clicked - I have the code, but I don't know how to integrate it properly.

I already looked through StackOverflow over how to import functions and tried it as well, but to no avail. Here is all of my code and the error:

Header.jsx

import React, { Component } from 'react';
import './Header.css';
import './Header.js';
import {openPage} from './Header.js';
 //import { Button, Navbar, Nav, NavItem, NavDropdown, MenuItem } from 
'react-bootstrap';


class Header extends Component {
    render() {
  return (
    <div>
    <button class="tablink" onclick={openPage('Home', this, 'red')}>Home</button>
    <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
    <button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
    <button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

      <div id="Home" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="News" class="tabcontent">
        <h3>News</h3>
        <p>Some news this fine day!</p> 
      </div>

      <div id="Contact" class="tabcontent">
        <h3>Contact</h3>
        <p>Get in touch, or swing by for a cup of coffee.</p>
      </div>

      <div id="About" class="tabcontent">
        <h3>About</h3>
        <p>Who we are and what we do.</p>
      </div>
      </div>
          );
          }
        }

      export default Header;

OpenPage is the function I have imported, but doesn't work properly. It gives me the error 'Cannot read property 'click' of null'' for > 23 | document.getElementById("defaultOpen").click();

Here is the .js file:

    function openPage(pageName, elmnt, color) {
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}

// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}

// Show the specific tab content
document.getElementById(pageName).style.display = "block";

// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

I would appreciate any tips or help! I have been stuck on this for a long time and really want to make my menu work. I am new to React and Javascript, so excuse me if I made a stupid mistake! Thanks in advance!

`Cannot read property 'click' of null'` - this is not a React error per-se, but is a JavaScript error. It means that whatever you're trying to read `.click` on is null, and the only `.click` I see comes after `document.getElementById("defaultOpen")`, which in turn tells me that that element is not present on your page. Maybe that'll help? — Lucas, Nov 06 '18 at 00:46
On React you have to use the "onClick" with and Uppercase on "Click" to use React. Otherwise, it will be the browser managing the click event instead of React. — Renato Francia, Nov 06 '18 at 01:24

score 0 · Answer 1 · answered Nov 06 '18 at 01:50

One way you can solve is by adding a clickHandler function and also adding an export on your functions.

functions.js

export const sampleFunction = () => {                                                                                                       
  console.log("Function clicked!!");
};

Component.js

  import React, { Component } from 'react';                                                                                                   
  import './App.css';

  import {sampleFunction} from './functions';

  class App extends Component {

    constructor(props){        
      super(props);            

      this.clickHandler = this.clickHandler.bind(this); 

    }

    clickHandler(){
      console.log("Checked stuff");   
      sampleFunction(); 
    }

    render() {
      return (
        <div className="App">
          <button onClick={this.clickHandler}>Function Working</button>
        </div>
      );
    }
  }

  export default App;

score 0 · Answer 2 · answered Nov 06 '18 at 05:48

First of all, in react you don't use the attribute onclick="". You should use onClick={}.

Then, I think your problem has to do with the way react works. React renders to a virtual DOM and after react is done doing changes to the virtual DOM, it gets rendered to the actual DOM. Also, the render is done asynchronous, so using document.getElementByID() my not yield the desired result. You should instead use React Refs. Have a look at this StackOverflow question: How to manually trigger click event in ReactJS? Here is also the documentation page

I hope that helped you

React.JS - I am trying to import functions from .js file into .jsx file, but it still doesn't work. Cannot read property 'click' of null'

2 Answers2