JIYIK CN >

The error “ Expected onClick listener to be a functiononClick ” occurs when we pass a value that is not a function to the element’s attribute . To fix the error, make sure that you pass only functions to the element’s attribute.onClick

const App = () => {
  // ⛔️ Warning: Expected `onClick` listener to be a function
  // instead got a value of `string` type.
  return (
    <div>
      <button onClick="console.log('Click')">Click</button>
    </div>
  );
};

export default App;

When a function is required, we pass a string to the button's onClickfunction property.

To resolve the error, make sure you pass the function to the element's onClickattribute.

const App = () => {
  const handleClick = () => {
    console.log('button clicked');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
};

export default App;

We passed a function to the element's onClickproperty, which resolved the error. However, notice that we did not call the function when we passed it to the prop.

We pass a reference to the function, not the result of calling the function.

If we pass the result of calling a function, then the event handler will be called immediately when the page loads, which is not what we want.

One common thing we have to do is pass arguments to event handlers. We can do this using inline arrow functions.

import {useState} from 'react';

const App = () => {
  const [count, setCount] = useState(0);

  const handleClick = (event, num) => {
    console.log(event.target);
    console.log('button clicked');
    setCount(count + num);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={event => handleClick(event, 100)}>Click</button>
    </div>
  );
};

export default App;

Call the function with the event object and a numeric argument handleClick.

请注意, we didn't handleClickpass the result of calling the function to the onClick prop.

We actually pass it a function that takes the event object as an argument and returns handleClickthe result of calling the function with the event and the number 100 as arguments.

It is very important not to handleClickpass the result of calling a function to onClickthe property, as the function will be called immediately when the page loads, which can cause an infinite re-rendering loop.

Summarize

The error “ Expected onClick listener to be a functiononClick ” appears when we pass a value that is not a function to the element’s attribute . To fix the error, you need to make sure that you only pass functions to the element’s attribute.onClick