{"id":1971,"date":"2018-05-28T14:15:09","date_gmt":"2018-05-28T19:15:09","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1971"},"modified":"2018-05-28T14:50:03","modified_gmt":"2018-05-28T19:50:03","slug":"react-bind-this-on-parent-child-components","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-bind-this-on-parent-child-components\/","title":{"rendered":"React: Using .bind(this) on parent and child components"},"content":{"rendered":"<p>In a react script, for every function in both the parent and child components we must have this magic line using <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">.bind(this)<\/code>in the constructors:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\"><strong>this.<\/strong>nameOfFunction = <strong>this.<\/strong>nameOfFunction<strong>.bind(this)<\/strong>;<\/pre>\n<p>For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Parent with a incrementNumberTurns() function:\r\nthis.incrementNumberTurns = this.incrementNumberTurns.bind(this);\r\n\r\n\/\/ Child with a handleClick() function:\r\nthis.handleClick = this.handleClick.bind(this)<\/pre>\n<p>Here is an example from the parent component constructor of my tic-tac-toe game. Every function name needs to be initialized in the constructor this way:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">class Game extends React.Component {\r\n  constructor(props) {\r\n    super(props)\r\n    this.incrementNumberTurns = this.incrementNumberTurns.bind(this);\r\n    this.populateXLocations = this.populateXLocations.bind(this);\r\n    this.cellClicked = this.cellClicked.bind(this);\r\n    this.updateBoard = this.updateBoard.bind(this);\r\n    this.newGame = this.newGame.bind(this);\r\n    this.changeTurns = this.changeTurns.bind(this);\r\n    this.setGameInProgress = this.setGameInProgress.bind(this);\r\n    this.setCatsGame = this.setCatsGame.bind(this);<\/pre>\n<p>See:<br \/>\n<a href=\"https:\/\/github.com\/chris-relaxing\/react-tic-tac-toe\/blob\/master\/tic-tac-toe.js\">https:\/\/github.com\/chris-relaxing\/react-tic-tac-toe\/blob\/master\/tic-tac-toe.js<\/a><\/p>\n<p>Here is what the React documentation says about <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">.bind(this)<\/code>:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1984\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/autobinding.png\" alt=\"\" width=\"927\" height=\"534\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/autobinding.png 927w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/autobinding-300x173.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/autobinding-768x442.png 768w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/05\/autobinding-676x389.png 676w\" sizes=\"auto, (max-width: 927px) 100vw, 927px\" \/><\/p>\n<p>For more information about <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">.bind(this)<\/code>, see:<br \/>\n<a href=\"https:\/\/stackoverflow.com\/questions\/29732015\/value-of-this-in-react-event-handler\">https:\/\/stackoverflow.com\/questions\/29732015\/value-of-this-in-react-event-handler<\/a><br \/>\n<a href=\"http:\/\/facebook.github.io\/react\/blog\/2015\/01\/27\/react-v0.13.0-beta-1.html\">http:\/\/facebook.github.io\/react\/blog\/2015\/01\/27\/react-v0.13.0-beta-1.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a react script, for every function in both the parent and child components we must have this magic line using .bind(this)in the constructors: this.nameOfFunction = this.nameOfFunction.bind(this); For example: \/\/ Parent with a incrementNumberTurns() function: this.incrementNumberTurns = this.incrementNumberTurns.bind(this); \/\/ Child with a handleClick() function: this.handleClick = this.handleClick.bind(this) Here is an example from the parent component &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-bind-this-on-parent-child-components\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">React: Using .bind(this) on parent and child components<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,111],"tags":[45,110],"class_list":["post-1971","post","type-post","status-publish","format-standard","hentry","category-javascript-language","category-react-js","tag-javascript","tag-react-js"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1971","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1971"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1971\/revisions"}],"predecessor-version":[{"id":1985,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1971\/revisions\/1985"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1971"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1971"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1971"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}