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

user_483510 0
Viewed 96892

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

reactjs javascript
7 Answers

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.

user_46841510

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!

user_110837590

-> 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

user_75965050

Use like below

onClick={this.functionName}
user_66145750

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.

user_52581710
Related