TypeError: Cannot read property 'preventDefault' of undefined in React

Question

I keep getting various errors while trying to run an onClick event in React. I get a TypeError for the (e)preventDefault() but if I try to eliminate this line in my code, it throws an error regarding the next line. I am obviously missing something. Can anyone please help me identify what the problem might be? I really appreciate it. Thank you. Here is the code: app.js

import React, { Component } from 'react';
import './App.css';
import { HashRouter as Router, Route } from 'react-router-dom';

import Home from './pages/Home';
import Portfolio from './pages/Portfolio';
import Work from './pages/Work';
import Servicios from './pages/Servicios';
import Contacto from './pages/Contacto';
import Team from './pages/Team';
import Aviso from './pages/Aviso';


class App extends Component {
  render() {
    return (
      <Router basename="/"> 
        <div>
        <Route exact path='/' component={Home} />
        <Route exact path='/Portfolio' component={Portfolio} />
        <Route exact path='/Work' component={Work} />
        <Route exact path='/Servicios' component={Servicios} />
        <Route exact path='/Contacto' component={Contacto} />
        <Route exact path='/Team' component={Team} />
        <Route exact path='/Aviso' component={Aviso} />
        </div>
      </Router>
    );
  }
}

export default App;

nav.js

import React, { Component } from 'react';
import '../App.css';
import { NavLink } from 'react-router-dom';

const isActivefunc = (match, location) => {
    return match
}


class Nav extends Component {
    render() {
        function openNav(e) {
            e.preventDefault();
            document.getElementById("mySidenav").style.width = "360px";
        }
        function closeNav(e) {
            e.preventDefault();
            document.getElementById("mySidenav").style.width = "0";
        }
        return (
                <div id="mySidenav" className="sidenav">
                    <div className="menu-wrapper">
                        <a href="javascript:void(0)" className="closebtn" onClick={closeNav()}>&times;</a>
                        <NavLink exact to="/" activeClassName="active a-link">- <span className="big-cap">H</span>OME</NavLink>
                        <NavLink exact to="/Portfolio" activeClassName="active a-link">- <span className="big-cap">P</span>ORTFOLIO</NavLink>
                        <NavLink exact to="/Work" activeClassName="active a-link">- <span className="big-cap">H</span>OW <span className="big-cap">W</span>E <span className="big-cap">W</span>ORK</NavLink>
                        <NavLink exact to="/Servicios" activeClassName="active a-link">- <span className="big-cap">S</span>ERVICIOS</NavLink>
                        <NavLink exact to="/Contacto" activeClassName="active a-link">- <span className="big-cap">C</span>ONTACTO</NavLink>
                    </div>
                    <div className="sidebar-content">
                        <p>Suspendisse et magna eget diam ultrices elementum. Duis molestie suscipit dui, eu finibus lorem gravida sed. Vestibulum nec diam non nisl aliquet auctor in at nulla. Sed at gravida nisi, eu semper magna. Phasellus quam nisi, vestibulum a iaculis nec, molestie ut quam. Fusce lacus metus, viverra vitae hendrerit in, ultrices ac nibh. 
                        <br />Cras interdum magna et sem fermentum efficitur. Quisque vitae accumsan sapien. Donec et magna at risus tristique facilisis. Proin ornare diam et urna imperdiet eleifend.</p>
                    </div>
                    <div className="sidebar-content">
                        <div className="wrapper">
                            <NavLink exact to="/Team" activeClassName="active" className="team-button a-link-2">Nuestro equipo base</NavLink><br />
                                <NavLink exact to="/Aviso" activeClassName="active" className="aviso a-link-2">Aviso de Privacidad</NavLink>
                                <p className="copy">&copy;2019 RRspark</p>
                        </div>
                        <br />
                        <br />
                        <br />
                    </div>
                    <div className="colored-side">
                        <div className="link-holder">
                            <a href="#">EN</a>
                            <a href="#">ES</a>
                        </div>
                        <span className="button-area" onClick={openNav()}>&#43;</span>
                        <h3 className="colored-side-slogan">RRspark Stellar Web Studio</h3>
                    </div>
                </div>
        );
    }
}

export default Nav

Home.js

import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';

import Nav from '../components/Nav';
import Main from '../components/Main';

class Home extends Component {
    render() {
        return (
            <div>
                <Nav />
                <Main />
                Body
            </div>
        );
    }
}

export default Home

If I am missing any code to help answer this question, please let me know. Thank you in advance for your help. Cheers.

Answer 1

You used onClick function when it is rendered. Please fix like this.

class Nav extends Component {
    openNav(e) {
         e.preventDefault();
         document.getElementById("mySidenav").style.width = "360px";
    }
    closeNav(e) {
         e.preventDefault();
         document.getElementById("mySidenav").style.width = "0";
    }
    render() {
       //...
      <a href="javascript:void(0)" className="closebtn" onClick={this.closeNav}>&times;</a>
       //...
      <span className="button-area" onClick={this.openNav}>&#43;</span>
       //...
    }

Answer 2

The problem is that you are invoking openNav() immediately upon render. Instead, you want to pass a reference to the function like so. Much like an event-listener/event-handler relationship.

 <span className="button-area" onClick={this.openNav}>&#43;</span>

You also would want to do the same thing with closeNav()

 <a href="javascript:void(0)" className="closebtn" onClick={this.closeNav}>&times;</a>