{"id":418,"date":"2022-04-10T15:52:47","date_gmt":"2022-04-10T05:52:47","guid":{"rendered":"https:\/\/www.kernelio.com\/blog\/?p=418"},"modified":"2022-04-10T15:52:47","modified_gmt":"2022-04-10T05:52:47","slug":"super-useful-arrow-function-in-react","status":"publish","type":"post","link":"https:\/\/www.kernelio.com\/blog\/2022\/04\/10\/super-useful-arrow-function-in-react\/","title":{"rendered":"Super useful Arrow Function in React"},"content":{"rendered":"<p>To avoid the annoying function binding in react components classes<\/p>\n<pre>constructor(props) {\r\n  \u00a0super(props);\r\n  \u00a0this.myFuncInClass = this.myFuncInClass.bind(this);\r\n}<\/pre>\n<p>Install the following plugin via npm and enable it<\/p>\n<p><code>babel-plugin-transform-class-properties<\/code><\/p>\n<p>Then you can write arrow function and void the binding.<\/p>\n<pre>myFuncInClass = () =&gt; { \r\n  \/\/ code\r\n}<\/pre>\n<p>Be aware about the difference between\u00a0<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener\">Arrow function expression<\/a>\u00a0and <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/function\">Traditional function expression<\/a>.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>To avoid the annoying function binding in react components classes constructor(props) { \u00a0super(props); \u00a0this.myFuncInClass = this.myFuncInClass.bind(this); } Install the following plugin via npm and enable it babel-plugin-transform-class-properties Then you can write arrow function and void the binding. myFuncInClass = () =&gt; { \/\/ code } Be aware about the difference between\u00a0Arrow function expression\u00a0and Traditional function&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-418","post","type-post","status-publish","format-standard","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/418","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/comments?post=418"}],"version-history":[{"count":5,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/418\/revisions"}],"predecessor-version":[{"id":423,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/418\/revisions\/423"}],"wp:attachment":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/media?parent=418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/categories?post=418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/tags?post=418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}