{"id":24592,"date":"2024-03-16T03:26:12","date_gmt":"2024-03-16T03:26:12","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/"},"modified":"2024-03-22T04:06:50","modified_gmt":"2024-03-22T04:06:50","slug":"how-can-a-react-child-component-pass-values-to-a-parent-component","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/","title":{"rendered":"How can a React child component pass values to a parent component?"},"content":{"rendered":"<p>In React, there are two ways to pass values from child components to parent components.<\/p>\n<ol>\n<li>Through callback functions, a parent component can pass a callback function to a child component via props. The child component can then call this callback function and pass parameters to pass values back to the parent component.<\/li>\n<\/ol>\n<p>Example code for 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> [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_\">handleChildValue<\/span> = (<span class=\"hljs-params\">childValue<\/span>) =&gt; {\r\n    <span class=\"hljs-title function_\">setValue<\/span>(childValue);\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\">{handleChildValue}<\/span> \/&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Value from child component: {value}<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>Example code for 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> [inputValue, setInputValue] = <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-title function_\">setInputValue<\/span>(event.<span class=\"hljs-property\">target<\/span>.<span class=\"hljs-property\">value<\/span>);\r\n    <span class=\"hljs-title function_\">onValueChange<\/span>(event.<span class=\"hljs-property\">target<\/span>.<span class=\"hljs-property\">value<\/span>);\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\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{inputValue}<\/span> <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/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_\">ChildComponent<\/span>;\r\n<\/code><\/pre>\n<p>In the example above, the ChildComponent receives a prop called onValueChange, which is a callback function. When the value of the input box in the child component changes, the handleChange function is called and passes the input value to the onValueChange callback function, thus passing the value back to the parent component.<\/p>\n<ol>\n<li>Using context:<br \/>\nThe parent component can pass values to the child components by creating a Context and placing the required values in the Context&#8217;s Provider. Child components can retrieve these values using the Context&#8217;s Consumer.<\/li>\n<\/ol>\n<p>Example code of the 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_\">MyContext<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/MyContext'<\/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> [value, setValue] = <span class=\"hljs-title function_\">useState<\/span>(<span class=\"hljs-string\">''<\/span>);\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\">MyContext.Provider<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{value}<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ChildComponent<\/span> \/&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">MyContext.Provider<\/span>&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Value from child component: {value}<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>Example code for subcomponents:<\/p>\n<pre class=\"post-pre\"><code><span class=\"hljs-keyword\">import<\/span> <span class=\"hljs-title class_\">React<\/span>, { useContext, 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_\">MyContext<\/span> } <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/MyContext'<\/span>;\r\n\r\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">ChildComponent<\/span>(<span class=\"hljs-params\"><\/span>) {\r\n  <span class=\"hljs-keyword\">const<\/span> value = <span class=\"hljs-title function_\">useContext<\/span>(<span class=\"hljs-title class_\">MyContext<\/span>);\r\n  <span class=\"hljs-keyword\">const<\/span> [inputValue, setInputValue] = <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-title function_\">setInputValue<\/span>(event.<span class=\"hljs-property\">target<\/span>.<span class=\"hljs-property\">value<\/span>);\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\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">{inputValue}<\/span> <span class=\"hljs-attr\">onChange<\/span>=<span class=\"hljs-string\">{handleChange}<\/span> \/&gt;<\/span>\r\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Value from parent component: {value}<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_\">ChildComponent<\/span>;\r\n<\/code><\/pre>\n<p>In the example above, the parent component, ParentComponent, creates a MyContext and places a value in the value attribute of MyContext.Provider. The child component, ChildComponent, uses useContext to retrieve the value of MyContext and displays it on the page. The child component can also update the state value of inputValue through the onChange event of the input, but this value only exists in the child component and is not passed to the parent component.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In React, there are two ways to pass values from child components to parent components. Through callback functions, a parent component can pass a callback function to a child component via props. The child component can then call this callback function and pass parameters to pass values back to the parent component. Example code for [&hellip;]<\/p>\n","protected":false},"author":14,"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-24592","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 pass values to a 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-pass-values-to-a-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 pass values to a parent component?\" \/>\n<meta property=\"og:description\" content=\"In React, there are two ways to pass values from child components to parent components. Through callback functions, a parent component can pass a callback function to a child component via props. The child component can then call this callback function and pass parameters to pass values back to the parent component. Example code for [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-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-16T03:26:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T04:06:50+00:00\" \/>\n<meta name=\"author\" content=\"Noah Thompson\" \/>\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=\"Noah Thompson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\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-pass-values-to-a-parent-component\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/\"},\"author\":{\"name\":\"Noah Thompson\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a\"},\"headline\":\"How can a React child component pass values to a parent component?\",\"datePublished\":\"2024-03-16T03:26:12+00:00\",\"dateModified\":\"2024-03-22T04:06:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/\"},\"wordCount\":248,\"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-pass-values-to-a-parent-component\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/\",\"name\":\"How can a React child component pass values to a parent component? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-16T03:26:12+00:00\",\"dateModified\":\"2024-03-22T04:06:50+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-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 pass values to a 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\/2e83cc6ab9f60d36921c2d0f9f280f4a\",\"name\":\"Noah Thompson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g\",\"caption\":\"Noah Thompson\"},\"url\":\"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How can a React child component pass values to a 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-pass-values-to-a-parent-component\/","og_locale":"en_US","og_type":"article","og_title":"How can a React child component pass values to a parent component?","og_description":"In React, there are two ways to pass values from child components to parent components. Through callback functions, a parent component can pass a callback function to a child component via props. The child component can then call this callback function and pass parameters to pass values back to the parent component. Example code for [&hellip;]","og_url":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-16T03:26:12+00:00","article_modified_time":"2024-03-22T04:06:50+00:00","author":"Noah Thompson","twitter_card":"summary_large_image","twitter_creator":"@SiliCloudGlobal","twitter_site":"@SiliCloudGlobal","twitter_misc":{"Written by":"Noah Thompson","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/"},"author":{"name":"Noah Thompson","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/2e83cc6ab9f60d36921c2d0f9f280f4a"},"headline":"How can a React child component pass values to a parent component?","datePublished":"2024-03-16T03:26:12+00:00","dateModified":"2024-03-22T04:06:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/"},"wordCount":248,"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-pass-values-to-a-parent-component\/","url":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/","name":"How can a React child component pass values to a parent component? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-16T03:26:12+00:00","dateModified":"2024-03-22T04:06:50+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-parent-component\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-can-a-react-child-component-pass-values-to-a-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 pass values to a 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\/2e83cc6ab9f60d36921c2d0f9f280f4a","name":"Noah Thompson","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/350e537e1530ede2762ee0237e877d6693f4f7163ab4f303202cc9a6b27b6cb4?s=96&d=mm&r=g","caption":"Noah Thompson"},"url":"https:\/\/www.silicloud.com\/blog\/author\/noahthompson\/"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24592","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\/14"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/comments?post=24592"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24592\/revisions"}],"predecessor-version":[{"id":58635,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/24592\/revisions\/58635"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=24592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=24592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=24592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}