{"id":1922,"date":"2020-07-14T14:30:49","date_gmt":"2020-07-14T18:30:49","guid":{"rendered":"http:\/\/shirishranjit.com\/blog1\/?page_id=1922"},"modified":"2020-07-14T14:30:50","modified_gmt":"2020-07-14T18:30:50","slug":"reactjs-button-onclick-function-called-on-render","status":"publish","type":"page","link":"https:\/\/shirishranjit.com\/blog1\/reactjs\/reactjs-button-onclick-function-called-on-render","title":{"rendered":"ReactJS Button onclick function called on render"},"content":{"rendered":"\n<p>You are happily coding your ReactJS application. You bind your function to a onclick or onchange to do your processing. Suddenly, you see this long error in your console. The error is cryptic and normally you will get a depth error or change function called in render. If you see there that means that you made a coding error. <\/p>\n\n\n\n<p>First, you called a function in onClick with a parenthesis &#8211; function() rather than just function.<\/p>\n\n\n\n<p>Second, if you mean to pass a parameter to your handle function, you will been to bind with argument. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>handleFunction.bind(this, argument)<\/code><\/pre>\n\n\n\n<p><\/p>\n<div class=\"twttr_buttons\"><div class=\"twttr_twitter\">\n\t\t\t\t\t<a href=\"http:\/\/twitter.com\/share?text=ReactJS+Button+onclick+function+called+on+render\" class=\"twitter-share-button\" data-via=\"\" data-hashtags=\"\"  data-size=\"default\" data-url=\"https:\/\/shirishranjit.com\/blog1\/reactjs\/reactjs-button-onclick-function-called-on-render\"  data-related=\"\" target=\"_blank\">Tweet<\/a>\n\t\t\t\t<\/div><div class=\"twttr_followme\">\n\t\t\t\t\t\t<a href=\"https:\/\/twitter.com\/shiranjit\" class=\"twitter-follow-button\" data-size=\"default\"  data-show-screen-name=\"false\"  target=\"_blank\">Follow me<\/a>\n\t\t\t\t\t<\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>You are happily coding your ReactJS application. You bind your function to a onclick or onchange to do your processing. Suddenly, you see this long error in your console. The error is cryptic and normally you will get a depth &hellip; <a href=\"https:\/\/shirishranjit.com\/blog1\/reactjs\/reactjs-button-onclick-function-called-on-render\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1918,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1922","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1922"}],"collection":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/comments?post=1922"}],"version-history":[{"count":1,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1922\/revisions"}],"predecessor-version":[{"id":1923,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1922\/revisions\/1923"}],"up":[{"embeddable":true,"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/pages\/1918"}],"wp:attachment":[{"href":"https:\/\/shirishranjit.com\/blog1\/wp-json\/wp\/v2\/media?parent=1922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}