{"id":24577,"date":"2024-03-16T03:25:06","date_gmt":"2024-03-16T03:25:06","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/"},"modified":"2024-03-22T04:04:38","modified_gmt":"2024-03-22T04:04:38","slug":"how-can-a-parent-component-in-react-access-the-value-of-a-child-component","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/","title":{"rendered":"How can a parent component in React access the value of a child component?"},"content":{"rendered":"<p>In React, a parent component can pass values to a child component through props and retrieve values from the child component through a callback function.<\/p>\n<p>Here is an example:<\/p>\n<p>Parent component:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n<span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span> <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/ChildComponent'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">ParentComponent<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-keyword\">const<\/span> [childValue, setChildValue] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-string\">''<\/span>);\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleChildValueChange<\/span> = (<span class=\"hljs-params\">value<\/span>) =&gt; {\r\n    <span class=\"hljs-title function_\">setChildValue<\/span>(value);\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ChildComponent<\/span> <span class=\"hljs-attr\">onValueChange<\/span>=<span class=\"hljs-string\">{handleChildValueChange}<\/span> \/&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\u5b50\u7ec4\u4ef6\u7684\u503c\uff1a{childValue}<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/span>\r\n  );\r\n}\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">ParentComponent<\/span>;\r\n<\/code><\/pre>\n<p>Child component:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useState } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'react'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">ChildComponent<\/span>(<span class=\"hljs-params\">{ onValueChange }<\/span>) {\r\n  <span class=\"hljs-keyword\">const<\/span> [value, setValue] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-string\">''<\/span>);\r\n\r\n  <span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">handleChange<\/span> = (<span class=\"hljs-params\">event<\/span>) =&gt; {\r\n    <span class=\"hljs-keyword\">const<\/span> newValue = event.<span class=\"hljs-property\">target<\/span>.<span class=\"hljs-property\">value<\/span>;\r\n    <span class=\"hljs-title function_\">setValue<\/span>(newValue);\r\n    <span class=\"hljs-title function_\">onValueChange<\/span>(newValue);\r\n  };\r\n\r\n  <span class=\"hljs-keyword\">return<\/span> (\r\n    <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{value}<\/span> <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/span> \/&gt;<\/span><\/span>\r\n  );\r\n}\r\n\r\n<span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span>;\r\n<\/code><\/pre>\n<p>In the parent component, a state variable childValue is created using the useState hook to store the value of the child component.<\/p>\n<p>Next, create a callback function called handleChildValueChange that will be invoked when the value of the child component changes, and update the new value to the childValue variable.<\/p>\n<p>In the child component, a state variable called value is created using the useState hook to store the value of the input box.<\/p>\n<p>Next, create a handleChange function that will be called when the value of the input box changes, updating the new value into the value variable.<\/p>\n<p>At the same time, call the onValueChange callback function passed down from the parent component and pass the new value as a parameter back to the parent component.<\/p>\n<p>Finally, in the parent component, the functionality of the parent component getting the value from the child component is achieved by passing the handleChildValueChange function to the onValueChange attribute of the child component.<\/p>\n<p>When the input field in the child component changes, the parent component will automatically update and display the newest value.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React, a parent component can pass values to a child component through props and retrieve values from the child component through a callback function. Here is an example: Parent component: import React, { useState } from &#8216;react&#8217;; import ChildComponent from &#8216;.\/ChildComponent&#8217;; function ParentComponent() { const [childValue, setChildValue] = useState(&#8221;); const handleChildValueChange = (value) =&gt; [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-24577","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.5 (Yoast SEO v21.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How can a parent component in React access the value of a child component? - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How can a parent component in React access the value of a child component?\" \/>\n<meta property=\"og:description\" content=\"In React, a parent component can pass values to a child component through props and retrieve values from the child component through a callback function. Here is an example: Parent component: import React, { useState } from &#039;react&#039;; import ChildComponent from &#039;.\/ChildComponent&#039;; function ParentComponent() { const [childValue, setChildValue] = useState(&#039;&#039;); const handleChildValueChange = (value) =&gt; [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-16T03:25:06+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T04:04:38+00:00\" \/>\n<meta name=\"author\" content=\"Sophia Anderson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:site\" content=\"@SiliCloudGlobal\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sophia Anderson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\"},\"author\":{\"name\":\"Sophia Anderson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\"},\"headline\":\"How can a parent component in React access the value of a child component?\",\"datePublished\":\"2024-03-16T03:25:06+00:00\",\"dateModified\":\"2024-03-22T04:04:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\"},\"wordCount\":226,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\",\"name\":\"How can a parent component in React access the value of a child component? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T03:25:06+00:00\",\"dateModified\":\"2024-03-22T04:04:38+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can a parent component in React access the value of a child component?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"name\":\"Silicon Cloud Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\",\"name\":\"Silicon Cloud Blog\",\"url\":\"https:\/\/www.silicloud.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"contentUrl\":\"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png\",\"width\":1024,\"height\":1024,\"caption\":\"Silicon Cloud Blog\"},\"image\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/SiliCloudGlobal\/\",\"https:\/\/twitter.com\/SiliCloudGlobal\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30\",\"name\":\"Sophia Anderson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g\",\"caption\":\"Sophia Anderson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can a parent component in React access the value of a child component? - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/","og_locale":"en_US","og_type":"article","og_title":"How can a parent component in React access the value of a child component?","og_description":"In React, a parent component can pass values to a child component through props and retrieve values from the child component through a callback function. Here is an example: Parent component: import React, { useState } from 'react'; import ChildComponent from '.\/ChildComponent'; function ParentComponent() { const [childValue, setChildValue] = useState(''); const handleChildValueChange = (value) =&gt; [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T03:25:06+00:00","article_modified_time":"2024-03-22T04:04:38+00:00","author":"Sophia Anderson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Sophia Anderson","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/"},"author":{"name":"Sophia Anderson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30"},"headline":"How can a parent component in React access the value of a child component?","datePublished":"2024-03-16T03:25:06+00:00","dateModified":"2024-03-22T04:04:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/"},"wordCount":226,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/","name":"How can a parent component in React access the value of a child component? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T03:25:06+00:00","dateModified":"2024-03-22T04:04:38+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-parent-component-in-react-access-the-value-of-a-child-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can a parent component in React access the value of a child component?"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/blog\/#website","url":"https:\/\/www.silicloud.com\/blog\/","name":"Silicon Cloud Blog","description":"","publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.silicloud.com\/blog\/#organization","name":"Silicon Cloud Blog","url":"https:\/\/www.silicloud.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","contentUrl":"https:\/\/www.silicloud.com\/blog\/wp-content\/uploads\/2023\/11\/EN-SILICON-Full.png","width":1024,"height":1024,"caption":"Silicon Cloud Blog"},"image":{"@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/SiliCloudGlobal\/","https:\/\/twitter.com\/SiliCloudGlobal"]},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/19a24313de9c988db3d69226b4a40a30","name":"Sophia Anderson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c726c09aa40e37115fb5c62d0c3ed62c16ca255d3763e2e3ae83a70ddf8c2175?s=96&d=mm&r=g","caption":"Sophia Anderson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/sophiaanderson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=24577"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24577\/revisions"}],"predecessor-version":[{"id":58620,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24577\/revisions\/58620"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=24577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=24577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=24577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}