{"id":2002,"date":"2018-05-28T19:07:42","date_gmt":"2018-05-29T00:07:42","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2002"},"modified":"2018-05-28T19:26:31","modified_gmt":"2018-05-29T00:26:31","slug":"react-call-parent-function-child-function-pass-data-parent-function","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-call-parent-function-child-function-pass-data-parent-function\/","title":{"rendered":"React: How to call a parent function from a child function and\/or pass data to the parent function"},"content":{"rendered":"<p>In a continuation of the theme of how to pass information around in react, this article details how to call a parent function from a child function. This previous article details how to pass state from parent to child:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"HlN9UcO6vA\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-pass-state-information-parent-child\/\">React: How to pass state information from parent to child<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-pass-state-information-parent-child\/embed\/#?secret=HlN9UcO6vA\" data-secret=\"HlN9UcO6vA\" width=\"600\" height=\"338\" title=\"&#8220;React: How to pass state information from parent to child&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>Allowing a child function to call a parent function works in nearly the same way. When the parent creates the child instance in it&#8217;s render function, pass the parent function reference as a prop. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ someParentMethod={this.someParentMethod}\r\nincrementNumberTurns={this.incrementNumberTurns}<\/pre>\n<p>Then, in the child function (triggered by an event such as onClick), you can call the parent function as if it is a prop. Like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">this.props.incrementNumberTurns();<\/pre>\n<p>&nbsp;<\/p>\n<h4><strong>Passing child props or values to parent function<\/strong><\/h4>\n<p>In addition to simply calling the parent function as shown above, we can also pass information to the parent by including it as an argument in the parent function. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Here, clicked_id = the child this.props.id.\r\nthis.props.populateXLocations(clicked_id);<\/pre>\n<p>For complete React code that demonstrates this in action, see my tic-tac-toe react script here:<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","protected":false},"excerpt":{"rendered":"<p>In a continuation of the theme of how to pass information around in react, this article details how to call a parent function from a child function. This previous article details how to pass state from parent to child: React: How to pass state information from parent to child Allowing a child function to call &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-call-parent-function-child-function-pass-data-parent-function\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">React: How to call a parent function from a child function and\/or pass data to the parent function<\/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-2002","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\/2002","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=2002"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2002\/revisions"}],"predecessor-version":[{"id":2009,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2002\/revisions\/2009"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2002"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2002"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2002"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}