Expected `onClick` listener to be a function, instead got a value of `string` type

The error “Expected `onClick` listener to be a function, instead got a value of `string` type.” occurs when you pass a value of string instead of a function to the onClick prop. This may happen when you give double quotes instead of curly braces when passing the listener function.

To solve this error, make sure you are passing a function into the onClick prop of an element.

The below example shows how this error was occurring.

// This will throw an error: Expected `onClick` listener to be a function, instead got a value of `string` type.
export default function App(){
  	const clickHandler = () => {
    	console.log("Button clicked!");
  	}
  	return (
    	<>
      		<button onClick="clickHandler">Click</button>
    	</>
  	)
}

In the above code, we passed the onClick prop as a string instead of a function. That means we gave double quotes instead of curly braces when passing event listener function into the prop. This is the cause of the above error.

To solve the error change onClick="clickHandler" into onClick={clickHandler}.

To fix this error, our code will become like this.

export default function App(){
  	const clickHandler = () => {
    	console.log("Button clicked!");
  	}
  	return (
    	<>
      		<button onClick={clickHandler}>Click</button>
    	</>
  	)
}

If you want to pass extra parameters into the event handler function, then you can use inline arrow functions like:

<button onClick={(event) => clickHandler(event)}>Click</button>

If we didn't use arrow functions to pass extra parameters, then the function will get executed at the time of rendering which leads to an infinite render loop that causes an error: Too many re-renders.

Conclusion

To solve the error “Expected `onClick` listener to be a function, instead got a value of `string` type.”, make sure you are always passing a function into the onClick prop of an element. Use curly braces like onClick={clickHandler} to pass the event handler function. If you want to pass an event object or extra parameters, then use inline arrow functions.