{"id":1995,"date":"2018-05-28T17:02:42","date_gmt":"2018-05-28T22:02:42","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1995"},"modified":"2018-05-28T17:02:42","modified_gmt":"2018-05-28T22:02:42","slug":"react-pass-state-information-parent-child","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-pass-state-information-parent-child\/","title":{"rendered":"React: How to pass state information from parent to child"},"content":{"rendered":"<p>In a react script, to pass state information from a parent component to a child component, the state information needs to be passed as a prop. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">numturns={this.state.number_of_turns}<\/pre>\n<p>Now, &#8220;numturns&#8221; can be used as a prop in the child. For example, inside the child handleclick function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">console.log(\"Child communication, number of turns from parent: \", this.props.numturns);<\/pre>\n<p>Lets say we have the following states set in the parent component:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\"> this.state = {\r\n      x_locations : [],\r\n      o_locations : [],\r\n      x_and_os: ['', '', '', '', '', '', '', '', ''],  \r\n      number_of_turns: 0,\r\n      currentTurn: 'X',\r\n      gameInProgress: false,\r\n      winner: \"\",\r\n      gameWon: false,\r\n      catsGame: false\r\n};<\/pre>\n<p>In order to pass these states to the child components, they need to be passed to the child element via the parent&#8217;s render function, as props. For example, passing state values to child element &#8220;Choosefirstplayer&#8221;:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;Choosefirstplayer currentTurn={this.state.currentTurn}\r\n                   catsGame={this.state.catsGame}\r\n                   changeTurns={this.changeTurns}\r\n                   setGameInProgress={this.setGameInProgress}\r\n                   gameinprogress={this.state.gameInProgress}\r\n                   newGame={this.newGame}\r\n                   winner={this.state.winner}\r\n                   gameWon={this.state.gameWon}\r\n                   numturns={this.state.number_of_turns}\/&gt;<\/pre>\n<p>Notice <mark>this.state<\/mark> in the right side in the curly braces. This is the passing of the state from the parent to the child component.<\/p>\n<p>The syntax is:<\/p>\n<p>nameofVariable = { <mark>this.state.nameofStateVariable<\/mark> }<\/p>\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 react script, to pass state information from a parent component to a child component, the state information needs to be passed as a prop. For example: numturns={this.state.number_of_turns} Now, &#8220;numturns&#8221; can be used as a prop in the child. For example, inside the child handleclick function: console.log(&#8220;Child communication, number of turns from parent: &#8220;, &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/05\/28\/react-pass-state-information-parent-child\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">React: How to pass state information from parent to child<\/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-1995","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\/1995","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=1995"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1995\/revisions"}],"predecessor-version":[{"id":2001,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1995\/revisions\/2001"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1995"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1995"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}