Onclick on button is not working in ReactJs-CodePudding

I am working with Reactjs (Nextjs),I put my "css,images,js" files in "public" folder,But my Menu bar is not showing (onclick is not working),How can i make this working so after click on this button menu will display,Here is my code

<button className="openbtn" onclick="openNav()">
        <img src="images/menu_btn.png" />
</button>

CodePudding user response：

You are sending a string to onClick function, so change your onClick button to this,

onClick={ openNav }

CodePudding user response：

As others are mentioning, you need your onClick attribute to call a handler function, ie.

const openNav = () => {
   console.log("openNav has been clicked");
}

<button className="openbtn" onClick={openNav}>
        <img src="images/menu_btn.png" />
</button>

CodePudding user response：

You should call your openNav function that way (else your are just sending a string) and use onClick (instead of onclick):

<button className="openbtn" onClick={openNav}>
    <img src="images/menu_btn.png" />
</button>

CodePudding user response：

Firstly you're passing openNav as a string, rather than a function - you can't invoke a string literal.

Secondly, you're trying to instantly invoke the openNav function in the onclick handler, which means openNav will fire as the code is run in the browser.

You'll want to do either:

onClick={openNav}

or if you want to pass an argument

onClick={(arg) => openNav(arg)}