{"id":17552,"date":"2024-03-15T15:11:55","date_gmt":"2024-03-15T15:11:55","guid":{"rendered":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/"},"modified":"2024-03-21T11:10:44","modified_gmt":"2024-03-21T11:10:44","slug":"how-to-change-the-value-of-props-in-react","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/","title":{"rendered":"How to change the value of props in react?"},"content":{"rendered":"

In React, props are read-only and cannot be directly modified. However, the value of props can be changed by the parent component.<\/p>\n

    \n
  1. Define a state in the parent component to store the props value that needs to be modified.<\/li>\n
  2. Define a function in the parent component to modify the value in the state.<\/li>\n
  3. Pass the modified value to the child component through props.<\/li>\n
  4. Render using props passed from the parent component in the child component.<\/li>\n<\/ol>\n

    Here is an example:<\/p>\n

    \/\/ \u7236\u7ec4\u4ef6<\/span>\r\nimport<\/span> React<\/span>, { useState } from<\/span> 'react'<\/span>;\r\nimport<\/span> ChildComponent<\/span> from<\/span> '.\/ChildComponent'<\/span>;\r\n\r\nfunction<\/span> ParentComponent<\/span>(<\/span>) {\r\n  const<\/span> [propValue, setPropValue] = useState<\/span>('initial value'<\/span>);\r\n\r\n  const<\/span> handleButtonClick<\/span> = (<\/span>) => {\r\n    \/\/ \u4fee\u6539propValue\u7684\u503c<\/span>\r\n    setPropValue<\/span>('new value'<\/span>);\r\n  };\r\n\r\n  return<\/span> (\r\n    <div<\/span>><\/span>\r\n      <ChildComponent<\/span> propValue<\/span>={propValue}<\/span> \/><\/span>\r\n      <button<\/span> onClick<\/span>={handleButtonClick}<\/span>><\/span>\u4fee\u6539props\u7684\u503c<\/button<\/span>><\/span>\r\n    <\/div<\/span>><\/span><\/span>\r\n  );\r\n}\r\n\r\nexport<\/span> default<\/span> ParentComponent<\/span>;\r\n\r\n\/\/ \u5b50\u7ec4\u4ef6<\/span>\r\nimport<\/span> React<\/span> from<\/span> 'react'<\/span>;\r\n\r\nfunction<\/span> ChildComponent<\/span>(props<\/span>) {\r\n  return<\/span> <div<\/span>><\/span>{props.propValue}<\/div<\/span>><\/span><\/span>;\r\n}\r\n\r\nexport<\/span> default<\/span> ChildComponent<\/span>;\r\n<\/code><\/pre>\n
    In the example above, a statepropValue is defined in the parent component ParentComponent to store the props value that needs to be modified. The parent component also defines a function handleButtonClick that is called when the button is clicked, which modifies the value of propValue. The modified value is then passed to the child component ChildComponent through props for rendering.<\/p>\n
    When the button is clicked, the props value in the child component will be updated, triggering a re-render of the child component to display the modified value.<\/p>\n","protected":false},"excerpt":{"rendered":"
    In React, props are read-only and cannot be directly modified. However, the value of props can be changed by the parent component. Define a state in the parent component to store the props value that needs to be modified. Define a function in the parent component to modify the value in the state. Pass the […]<\/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-17552","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nHow to change the value of props in react? - 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-to-change-the-value-of-props-in-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to change the value of props in react?\" \/>\n<meta property=\"og:description\" content=\"In React, props are read-only and cannot be directly modified. However, the value of props can be changed by the parent component. Define a state in the parent component to store the props value that needs to be modified. Define a function in the parent component to modify the value in the state. Pass the […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/\" \/>\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:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-21T11:10:44+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-to-change-the-value-of-props-in-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/\"},\"author\":{\"name\":\"Jackson Davis\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350\"},\"headline\":\"How to change the value of props in react?\",\"datePublished\":\"2024-03-15T15:11:55+00:00\",\"dateModified\":\"2024-03-21T11:10:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/\"},\"wordCount\":175,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#organization\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/\",\"url\":\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/\",\"name\":\"How to change the value of props in react? - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/#website\"},\"datePublished\":\"2024-03-15T15:11:55+00:00\",\"dateModified\":\"2024-03-21T11:10:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.silicloud.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to change the value of props in react?\"}]},{\"@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 to change the value of props in react? - 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-to-change-the-value-of-props-in-react\/","og_locale":"en_US","og_type":"article","og_title":"How to change the value of props in react?","og_description":"In React, props are read-only and cannot be directly modified. However, the value of props can be changed by the parent component. Define a state in the parent component to store the props value that needs to be modified. Define a function in the parent component to modify the value in the state. Pass the […]","og_url":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/","og_site_name":"Blog - Silicon Cloud","article_publisher":"https:\/\/www.facebook.com\/SiliCloudGlobal\/","article_published_time":"2024-03-15T15:11:55+00:00","article_modified_time":"2024-03-21T11:10:44+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-to-change-the-value-of-props-in-react\/#article","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/"},"author":{"name":"Jackson Davis","@id":"https:\/\/www.silicloud.com\/blog\/#\/schema\/person\/55a10b8b0457c35884c25677889ad350"},"headline":"How to change the value of props in react?","datePublished":"2024-03-15T15:11:55+00:00","dateModified":"2024-03-21T11:10:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/"},"wordCount":175,"commentCount":0,"publisher":{"@id":"https:\/\/www.silicloud.com\/blog\/#organization"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/","url":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/","name":"How to change the value of props in react? - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/blog\/#website"},"datePublished":"2024-03-15T15:11:55+00:00","dateModified":"2024-03-21T11:10:44+00:00","breadcrumb":{"@id":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/blog\/how-to-change-the-value-of-props-in-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.silicloud.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to change the value of props in react?"}]},{"@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\/17552","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=17552"}],"version-history":[{"count":1,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17552\/revisions"}],"predecessor-version":[{"id":51170,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/posts\/17552\/revisions\/51170"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/media?parent=17552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/categories?post=17552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/blog\/wp-json\/wp\/v2\/tags?post=17552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}