ReactJS: Expected onClick listener to be a function, instead got type string

I can't figure out why ReactJs is finding "string" instead of my click handler methods.

This is my code:

define(["react"], function(React) {


return React.createClass({

	pageUp: function() {
		console.log("go next page");
	},

	pageDown: function() {
		console.log("go prev page");
	},

	toggleMenu: function() {
		console.log("toggle menu");
		this.state.menuStatus = !this.menuStatus;
	},

	getInitialState: function() {
		return {
			// Toggle menu status; false -> closed | true -> opened
			menuStatus: false
		}
	},

	render: function() {
		var _this = this;
		return (
			<div className="overlay-nav">
				<ul className="up-down-arrows">
					<li onClick="{this.pageUp}" className="arrow-up"><i className="fa fa-angle-up"></i></li>
					<li onClick="{_this.pageDown.bind(_this)}" className="arrow-down"><i className="fa fa-angle-down"></i></li>
				</ul>

				<div onClick="{_this.toggleMenu}" className="toggleMenu"><i className="fa fa-bars"></i></div>
			</div>
		);
	}
});

});

I already tried to use

var _this = _this
// ....
<li onClick="_this.pageUp" ...

and binds like

<li onClick="{this.pageUp.bind(this)}"

But when I refresh the page, I always get this error:

The error I get is:

Error: Expected onClick listener to be a function, instead got type string(…)

Any help is much appreciate.

tks

You need to remove the quotes. <li onClick={this.pageUp.bind(this)}>...

In vanilla javascript you would probably have onclick="somefunctionname". But not in JSX, you need to pass a function as stated in the error.

Also, the .bind(this) is not necessary if you are using React.createClass. Once you have removed the quotes, you will probably get a warning stating that is not necessary since React does that for you.

I know it is a bit late but still want to answer the questions for others.

Remove "" after onClick.

For example: change onClick="{this.pageUp}" to onClick={this.pageUp}.

Another scenario this might happen is when you are calling the action method from an onClick event, if you miss the function representation part like...

<button onClick = {this.props.increment('INCREMENT')}>+</button>

instead

<button onClick = {()=>this.props.increment('INCREMENT')}>+</button>

the ()=>{} is important to tell your onClick event that it is a function.

It can be because of the parentheses with the function u are using for onClick i.e. onClick = { aFtn() }. This is wrong cause the parentheses directly calls the function on render instead of waiting till the click i.e. onClick. Solution is just to remove these parentheses like onClick = { aFtn }. Good Luck!

-> React events are named using camelCase, rather than lowercase. -> With JSX you pass a function as the event handler, rather than a string.

For example, the HTML:

<button onclick="activateLasers()">
  Activate Lasers
</button>

is slightly different in React:

<button onClick={activateLasers}>
  Activate Lasers
</button>

Soure:- https://reactjs.org/docs/handling-events.html

Use like below

onClick={this.functionName}

Instead of using inline functions, try creating arrow functions, assign them to variables, and passing those variable names in between the {} as the onClick handlers. This worked for me.