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!