{"id":17548,"date":"2024-03-15T15:11:34","date_gmt":"2024-03-15T15:11:34","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/"},"modified":"2024-03-21T11:10:08","modified_gmt":"2024-03-21T11:10:08","slug":"how-can-a-react-child-component-modify-the-state-of-its-parent-component","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/","title":{"rendered":"How can a React child component modify the state of its parent component?"},"content":{"rendered":"<p>In React, the state of a parent component can be passed down to a child component through props. If a child component needs to modify the state of the parent component, it can do so by calling a callback function passed down from the parent component.<\/p>\n<p>Here is an example:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-comment\">\/\/ \u7236\u7ec4\u4ef6<\/span>\r\n<span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title class_\">ParentComponent<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title class_ inherited__\">React.Component<\/span> {\r\n  state = {\r\n    <span class=\"hljs-attr\">count<\/span>: <span class=\"hljs-number\">0<\/span>\r\n  };\r\n\r\n  <span class=\"hljs-comment\">\/\/ \u7528\u4e8e\u66f4\u65b0\u7236\u7ec4\u4ef6\u7684\u72b6\u6001\u7684\u56de\u8c03\u51fd\u6570<\/span>\r\n  updateCount = <span class=\"hljs-function\">(<span class=\"hljs-params\">newCount<\/span>) =&gt;<\/span> {\r\n    <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-title function_\">setState<\/span>({ <span class=\"hljs-attr\">count<\/span>: newCount });\r\n  };\r\n\r\n  <span class=\"hljs-title function_\">render<\/span>(<span class=\"hljs-params\"><\/span>) {\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\">updateCount<\/span>=<span class=\"hljs-string\">{this.updateCount}<\/span> \/&gt;<\/span>\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Count: {this.state.count}<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\r\n<span class=\"hljs-comment\">\/\/ \u5b50\u7ec4\u4ef6<\/span>\r\n<span class=\"hljs-keyword\">class<\/span> <span class=\"hljs-title class_\">ChildComponent<\/span> <span class=\"hljs-keyword\">extends<\/span> <span class=\"hljs-title class_ inherited__\">React.Component<\/span> {\r\n  handleClick = <span class=\"hljs-function\">() =&gt;<\/span> {\r\n    <span class=\"hljs-comment\">\/\/ \u8c03\u7528\u7236\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u56de\u8c03\u51fd\u6570\u6765\u66f4\u65b0\u7236\u7ec4\u4ef6\u7684\u72b6\u6001<\/span>\r\n    <span class=\"hljs-variable language_\">this<\/span>.<span class=\"hljs-property\">props<\/span>.<span class=\"hljs-title function_\">updateCount<\/span>(<span class=\"hljs-number\">10<\/span>);\r\n  };\r\n\r\n  <span class=\"hljs-title function_\">render<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n    <span class=\"hljs-keyword\">return<\/span> (\r\n      <span class=\"language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span> <span class=\"hljs-attr\">onClick<\/span>=<span class=\"hljs-string\">{this.handleClick}<\/span>&gt;<\/span>Update Count<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span>\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>In the example above, the state of the parent component, count, is passed to the child component, ChildComponent, through the updateCount callback function. The handleClick method in the child component can then be used to call the updateCount function in order to modify the parent component&#8217;s state.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React, the state of a parent component can be passed down to a child component through props. If a child component needs to modify the state of the parent component, it can do so by calling a callback function passed down from the parent component. Here is an example: \/\/ \u7236\u7ec4\u4ef6 class ParentComponent extends [&hellip;]<\/p>\n","protected":false},"author":10,"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-17548","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 React child component modify the state of its parent 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-react-child-component-modify-the-state-of-its-parent-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 React child component modify the state of its parent component?\" \/>\n<meta property=\"og:description\" content=\"In React, the state of a parent component can be passed down to a child component through props. If a child component needs to modify the state of the parent component, it can do so by calling a callback function passed down from the parent component. Here is an example: \/\/ \u7236\u7ec4\u4ef6 class ParentComponent extends [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-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-15T15:11:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:10:08+00:00\" \/>\n<meta name=\"author\" content=\"Jackson Davis\" \/>\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=\"Jackson Davis\" \/>\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-react-child-component-modify-the-state-of-its-parent-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"How can a React child component modify the state of its parent component?\",\"datePublished\":\"2024-03-15T15:11:34+00:00\",\"dateModified\":\"2024-03-21T11:10:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/\"},\"wordCount\":111,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/\",\"name\":\"How can a React child component modify the state of its parent component? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:11:34+00:00\",\"dateModified\":\"2024-03-21T11:10:08+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How can a React child component modify the state of its parent 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\/55a10b8b0457c35884c25677889ad350\",\"name\":\"Jackson Davis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g\",\"caption\":\"Jackson Davis\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can a React child component modify the state of its parent 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-react-child-component-modify-the-state-of-its-parent-component\/","og_locale":"en_US","og_type":"article","og_title":"How can a React child component modify the state of its parent component?","og_description":"In React, the state of a parent component can be passed down to a child component through props. If a child component needs to modify the state of the parent component, it can do so by calling a callback function passed down from the parent component. Here is an example: \/\/ \u7236\u7ec4\u4ef6 class ParentComponent extends [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:11:34+00:00","article_modified_time":"2024-03-21T11:10:08+00:00","author":"Jackson Davis","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Jackson Davis","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"How can a React child component modify the state of its parent component?","datePublished":"2024-03-15T15:11:34+00:00","dateModified":"2024-03-21T11:10:08+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/"},"wordCount":111,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/","name":"How can a React child component modify the state of its parent component? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:11:34+00:00","dateModified":"2024-03-21T11:10:08+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-modify-the-state-of-its-parent-component\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How can a React child component modify the state of its parent 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\/55a10b8b0457c35884c25677889ad350","name":"Jackson Davis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2fdb47d6df1226e92380d96973782572a97b0675d098bb914410dec348eb5d29?s=96&d=mm&r=g","caption":"Jackson Davis"},"url":"https:\/\/www.silicloud.com\/blog\/author\/jacksondavis\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17548","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\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=17548"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17548\/revisions"}],"predecessor-version":[{"id":51166,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17548\/revisions\/51166"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17548"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17548"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17548"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}