NextJS - Call js function when onClick

Question

I want to call js function on client side when I click button/div elements.

This scenario works.(addEventListener)

MyComponent.js

import Script from 'next/script'
export default function MyComponent({ props }) {
    return (
             <>
             <div className="slider-buttons">
                  <div key="1" data-id="1" className="slider-button active"></div>
                  <div key="2" data-id="2" className="slider-button"></div>
                  <div key="3" data-id="3" className="slider-button"></div>
                  <div key="4" data-id="4" className="slider-button"></div>
             </div>
             <Script src="/assets/slider.js" strategy="afterInteractive" />
             </>
            )
}

Slider.js

var elements = document.getElementsByClassName("slider-button");
Array.from(elements).forEach(function (element) {
    element.addEventListener('click', ClientClick);
});

function ClientClick(e) {
    if (e && e.target) {
        var clickedId = e.target.getAttribute('data-id');
        // DOM Manipulation
    }
}

This scenario I want (without addEventListener)

MyComponent.js

import Script from 'next/script'
export default function MyComponent({ props }) {
    return (
             <>
             <div className="slider-buttons">
                  <div key="1" data-id="1" onClick="ClientClick(1)" className="slider-button active"></div>
                  <div key="2" data-id="2" onClick="ClientClick(2)" className="slider-button"></div>
                  <div key="3" data-id="3" onClick="ClientClick(3)" className="slider-button"></div>
                  <div key="4" data-id="4" onClick="ClientClick(4)" className="slider-button"></div>
             </div>
             <Script src="/assets/slider.js" strategy="afterInteractive" />
             </>
            )
}

Slider.js

function ClientClick(clickedId ) {
    // DOM Manipulation
}

Returns an error

Unhandled Runtime Error Error: Expected onClick listener to be a function, instead got a value of string type.

Is that possible to call JS function on client-side without addEventListener?

Karthik RP · Accepted Answer · 2021-10-28 10:40:21Z

5

onClick in react expects a function to be passed, in your case you are passing a value returned by the function call.

So just change your onClick={ClientClick(1)} to onClick={() => ClientClick(1)}

Changing it to the below code should work.

<div key="1" data-id="1" onClick="() => ClientClick(1)" className="slider-button active"></div>
<div key="2" data-id="2" onClick="() => ClientClick(2)" className="slider-button"></div>
<div key="3" data-id="3" onClick="() => ClientClick(3)" className="slider-button"></div>
<div key="4" data-id="4" onClick="() => ClientClick(4)" className="slider-button"></div>

answered Oct 28, 2021 at 10:40

Karthik RP

1,0781 gold badge16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MateuszWawrzynski · Accepted Answer · 2021-10-28 09:45:41Z

0

Events handling in React (or Next.js) look little different than in a vanilla JS.

Check it out:
https://reactjs.org/docs/handling-events.html

answered Oct 28, 2021 at 9:45

MateuszWawrzynski

1,3312 gold badges11 silver badges15 bronze badges

Collectives™ on Stack Overflow

NextJS - Call js function when onClick

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related