React (NextJS) function not defined

Question

Im making a mobile header for my personal website. In only HTML, CSS and JS its simple, but in React its different and I dont get how to change my JS part.

When the mobile navigation is activated the user can click on a menu button to open a side nav. This should work per onClick, but everytime I try it, it says "Cannot read property 'closeNav' of undefined".

I tried different versions, mainly from stackoverflow, but nothing works.

This is the navigation + mobile nav

import Link from 'next/link'
import Main from './main'

const Navigation = () => (
    <div>
        <header className="global-nav">
            <div className="wrapper">
                <Link href="/"><div className="logo-header"><a className="logo-global"></a></div></Link>
                <nav>
                    <ul>
                        <li><Link href="/"><a>Home</a></Link></li>
                        <li><Link href="/about"><a>Über mich</a></Link></li>
                        <li><Link href="/leistungen"><a>Leistungen</a></Link></li>
                        <li><Link href="/referenzen"><a>Referenzen</a></Link></li>
                        <li><Link href="/blog"><a>Blog</a></Link></li>
                    </ul>
                </nav>
            </div>
        </header>
        <header className="mobile-global-nav">
            <nav className="menu" id="menu-mobile">
                <a onClick={this.closeNav} href="javascript:void(0)" className="menu-close menu-icons">
                    <i className="fas fa-times"></i>
                </a>
                <ul className="nav-mobile">
                    <a onClick={this.closeNav} href="javascript:void(0)" className="menu-close menu-icons">
                    </a>
                    <li>
                        <a onClick={this.closeNav} href="javascript:void(0)" className="menu-close menu-icons"></a>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/about">Über mich</a>
                    </li>
                    <li>
                        <a href="/leistungen">Leistungen</a>
                    </li>
                    <li>
                        <a href="/referenzen">Referenzen</a>
                    </li>
                    <li>
                        <a href="/blog">Blog</a>
                    </li>
                </ul>
            </nav>
            <section className="items">
                <div className="wrapper">
                    <a onClick={this.openNav} href="javascript:void(0)" className="menu-icons">
                        <i className="fas fa-bars"></i>
                    </a>
                    <a href="/" className="logo-mobile"></a>
                </div>
            </section>
        </header>

    </div>
)

export default Navigation

Thats the last version I tried:

const Main = () => (

        function openNav() {
            document.getElementById("menu-mobile").style.width = "25rem";
        },
        function closeNav() {
            document.getElementById("menu-mobile").style.width = "0";
        }
)

export default Main

Nick Friedman · Accepted Answer · 2018-12-05 21:46:02Z

If you want the function in Navigation just write it in the file as so.

const openNav = () => document.getElementById("menu-mobile").style.width = "25rem";
const closeNav = () => document.getElementById("menu-mobile").style.width = "0";

const Navigation = () => (
  <div>
      <header className="global-nav">
      ......

If you specifically want to import it from another file just export it from another javascript file as so. Create a file functions.js and write this

export const openNav = () => document.getElementById("menu-mobile").style.width = "25rem";
export const closeNav = () => document.getElementById("menu-mobile").style.width = "0";

then just import those functions from that file

import { openNav, closeNav } from "./functions";

You then would just call closeNav without this

Having said all that, typically in React you would not manipulate the DOM directly instead you would probably want to create a Class component, create a state object and use setState() to change the state of your app. So in your case you would perhaps store the width of the div in state as width: "25rem" to start and then when you click on the div you would call setState as so setState({width: 0}).

You may want to read up all about state and setState() in the React docs here. https://reactjs.org/docs/state-and-lifecycle.html

Collectives™ on Stack Overflow

React (NextJS) function not defined

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related