React 'toggleBurgerMenu' is not defined no-undef - reactjs

Question

I am a total newbie on react. I am trying to use a functional app and wanted to use the function toggleBurgerMenu(). The problem, I am not sure what else I need to define it. Should I use props.toggleBurgerMenu()?
import React from 'react'
import { Link } from "react-router-dom";
import './Header.scss'
const Header = (props) => {
toggleBurgerMenu = () => {
document.querySelector('.navbar-menu').classList.toggle('is-active');
}
return (
<div>
<header>
<nav className="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" className="navbar-menu">
<div className="navbar-start">
<Link to="/home" className="navbar-item" onClick={()=> this.toggleBurgerMenu()}>Home</Link>
</div>
</div>
</nav>
</header>
</div>
)
}
export default Header
Appreciate any help. thank you

Answer 1

You need to define your toggleBurgerMenu function like this const toggleBurgerMenu = () => { document.querySelector('.navbar-menu').classList.toggle('is-active'); }. And then you can use it in the onClick Event like this <Link to="/home" className="navbar-item" onClick={toggleBurgerMenu}>Home</Link>

Answer 2

with react the best thing to do is not using document you could use a ref instead, but in this case you can add some state and update the classname
here is an easy example
const Header = (props) => {
/** function to set the state of the button */
const [isActive, setIsActive] = useState(initialState)
return (
<div>
<header>
<nav className="navbar" role="navigation" aria-label="main navigation">
{/**if its true we add is-active class there are several package to this*/}
<div id="navbarBasicExample" className={`navbar-menu ${isActive ? 'is-active' : ''}`}>
<div className="navbar-start">
<Link to="/home" className="navbar-item" onClick={() => setIsActive(prev => !prev.setIsActive)}>Home</Link>
</div>
</div>
</nav>
</header>
</div>
)
}
export default Header