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

Question

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

Answer 1

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.