{"id":2370,"date":"2021-03-07T23:16:05","date_gmt":"2021-03-07T16:16:05","guid":{"rendered":"https:\/\/5mtech.vn\/?p=2370"},"modified":"2021-03-07T23:16:05","modified_gmt":"2021-03-07T16:16:05","slug":"tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh","status":"publish","type":"post","link":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html","title":{"rendered":"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh)"},"content":{"rendered":"<h2><span id=\"State_trong_ReactJS_la_gi\">State trong ReactJS l\u00e0 g\u00ec?<\/span><\/h2>\n<p>State l\u00e0 m\u1ed9t object, l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quan tr\u1ecdng \u0111\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t\u00a0component.<\/p>\n<p>State c\u00f3 t\u00e1c d\u1ee5ng l\u01b0u tr\u1eef d\u1eef li\u1ec7u c\u1ee7a m\u1ed9t component v\u00e0 ch\u1ec9 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong n\u1ed9i b\u1ed9 m\u1ed9t component m\u00e0 th\u00f4i.<\/p>\n<p>Khi gi\u00e1 tr\u1ecb c\u1ee7a state \u0111\u01b0\u1ee3c thay \u0111\u1ed5i th\u00ec \u0111\u1ed3ng ngh\u0129a component \u0111\u00f3 s\u1ebd \u0111\u01b0\u1ee3c render l\u1ea1i.<\/p>\n<h2><span id=\"Su_dung_state_nhu_the_nao\">S\u1eed d\u1ee5ng state nh\u01b0 th\u1ebf n\u00e0o?<\/span><\/h2>\n<p>\u0110\u1ec3 s\u1eed d\u1ee5ng \u0111\u01b0\u1ee3c state th\u00ec b\u1ea1n c\u00f3 2 c\u00e1ch \u0111\u1ec3 khai b\u00e1o<\/p>\n<pre class=\"wp-block-code\"><code>\/\/ C\u00e1ch 1:\r\nthis.state = { name : 'VoManhKien.com' }<\/code><\/pre>\n<p>V\u1edbi c\u00e1ch 1 th\u00ec b\u1ea1n c\u00f3 th\u1ec3 d\u00f9ng t\u1eeb kho\u00e1\u00a0<code>this.state<\/code>\u00a0\u0111\u1eb7t trong m\u1ed9t\u00a0<code>class<\/code>\u00a0\u0111\u1ec3 khai b\u00e1o.<\/p>\n<pre class=\"wp-block-code\"><code>\/\/ C\u00e1ch 2:\r\nconstructor(props) {\r\n   super(props);\r\n   this.state = { website: \"VoManhKien.com\" };\r\n }<\/code><\/pre>\n<p>V\u1edbi c\u00e1ch 2 th\u00ec b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ec3 trong th\u1ebb kh\u1edfi t\u1ea1o\u00a0<code>constructor<\/code><\/p>\n<p>React \u0111\u1ec1 xu\u1ea5t b\u1ea1n n\u00ean s\u1eed d\u1ee5ng c\u00e1ch 2 \u0111\u1ec3\u00a0kh\u1edfi t\u1ea1o state.<\/p>\n<p>\u0110\u1ed1i v\u1edbi m\u1ed9t\u00a0function component\u00a0th\u00ec b\u1ea1n ph\u1ea3i s\u1eed d\u1ee5ng\u00a0<code>useState()<\/code>\u00a0\u0111\u1ec3 c\u00f3 th\u1ec3 khai b\u00e1o m\u1ed9t state. \u0110\u00e2y l\u00e0 m\u1ed9t\u00a0React Hooks\u00a0ch\u00fang ta s\u1ebd h\u1ecdc trong nh\u1eefng b\u00e0i sau.<\/p>\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng state m\u1edbi khai b\u00e1o th\u00ec b\u1ea1n c\u00f3 th\u1ec3 g\u1ecdi \u0111\u1ebfn object\u00a0<code>state<\/code>\u00a0nh\u01b0\u00a0<code>this.state.name<\/code>\u00a0<code>name<\/code>\u00a0\u1edf \u0111\u00e2y l\u00e0 ph\u1ea7n t\u1eed trong object b\u1ea1n \u0111\u00e3 khai b\u00e1o \u1edf tr\u00ean.<\/p>\n<p>B\u1ea1n h\u00e3y th\u1eed log ra xem<\/p>\n<pre class=\"wp-block-code\"><code>console.log(this.state.name) \/\/ VoManhKien.com<\/code><\/pre>\n<p>B\u1ea1n c\u00f3 th\u1ec3 xem m\u1ed9t v\u00ed d\u1ee5 nh\u1ecf b\u00ean d\u01b0\u1edbi, m\u00ecnh khai b\u00e1o state b\u00ean trong\u00a0<code>constructor<\/code>\u00a0v\u00e0 sau \u0111\u00f3 g\u1ecdi ra \u1edf b\u00ean trong h\u00e0m\u00a0<code>render<\/code>\u00a0\u0111\u1ec3 s\u1eed d\u1ee5ng.<\/p>\n<pre class=\"wp-block-code\"><code>import React from \"react\";\r\n \r\nclass App extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = { name: \"VoManhKien.com\" };\r\n  }\r\n  render() {\r\n    return (\r\n      &lt;div&gt;\r\n        &lt;h1&gt;H\u1ecdc ReactJS t\u1ea1i {this.state.name} &lt;\/h1&gt;\r\n      &lt;\/div&gt;\r\n    );\r\n  }\r\n}\r\nexport default App;<\/code><\/pre>\n<p>N\u1ebfu b\u1ea1n mu\u1ed1n c\u1eadp nh\u1eadt m\u1ed9t state th\u00ec b\u1ea1n ch\u1ec9 c\u1ea7n g\u1ecdi ph\u01b0\u01a1ng th\u1ee9c<\/p>\n<p><code>this.setState({key: value})<\/code><\/p>\n<p>L\u01b0u \u00fd: b\u1ea1n kh\u00f4ng th\u1ec3 g\u00e1n gi\u00e1 tr\u1ecb m\u1edbi cho state b\u1eb1ng\u00a0<code>this.state.name = \"Kien.pro\"<\/code><\/p>\n<p>V\u00ed d\u1ee5 m\u00ecnh c\u1eadp nh\u1eadt gi\u00e1 tr\u1ecb\u00a0<code>name<\/code>\u00a0\u1edf tr\u00ean th\u00ec m\u00ecnh s\u1ebd l\u00e0m nh\u01b0 sau:<\/p>\n<pre class=\"wp-block-code\"><code>this.setState({ name: \"Kien.pro\" })<\/code><\/pre>\n<p>Ngo\u00e0i ra b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 l\u1ea5y gi\u00e1 tr\u1ecb tr\u01b0\u1edbc c\u1ee7a state tr\u01b0\u1edbc khi c\u1eadp nh\u1eadt<\/p>\n<pre class=\"wp-block-code\"><code>this.setState((state) =&gt; {\r\n  return {\r\n      count: state.count + 1,\r\n    };\r\n  });\r\n}}<\/code><\/pre>\n<p>B\u1ea1n c\u00f3 th\u1ec3 xem v\u00ed d\u1ee5 b\u00ean d\u01b0\u1edbi, m\u00ecnh \u0111\u00e3 l\u00e0m theo 2 c\u00e1ch\u00a0<code>setState<\/code><\/p>\n<pre class=\"wp-block-code\"><code>import React from \"react\";\r\nimport \".\/App.css\";\r\n\r\nclass App extends React.Component {\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      count: 1,\r\n    };\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      &lt;div className=\"App\"&gt;\r\n        &lt;p&gt;Count: {this.state.count}&lt;\/p&gt;\r\n        &lt;button\r\n          onClick={() =&gt; {\r\n            this.setState({\r\n              count: this.state.count + 1,\r\n            });\r\n          }}\r\n        &gt;\r\n          Th\u00eam 1\r\n        &lt;\/button&gt;\r\n        &lt;button\r\n          onClick={() =&gt; {\r\n            this.setState((state) =&gt; {\r\n              return {\r\n                count: state.count - 2,\r\n              };\r\n            });\r\n          }}\r\n        &gt;\r\n          B\u1edbt 2\r\n        &lt;\/button&gt;\r\n      &lt;\/div&gt;\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;\r\n<\/code><\/pre>\n<p>V\u00e0 k\u1ebft qu\u1ea3 s\u1ebd ra th\u1ebf n\u00e0y<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-773 loaded\" title=\"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) 2\" src=\"https:\/\/static.vomanhkien.com\/files\/20200928151025\/state-trong-reactjs-demo.gif\" alt=\"State demo\" data-lazy=\"true\" \/><figcaption>State Demo<\/figcaption><\/figure>\n<h2><span id=\"Su_khac_nhau_giua_Props_va_State\">S\u1ef1 kh\u00e1c nhau gi\u1eefa Props v\u00e0 State<\/span><\/h2>\n<p>State v\u00e0 Props c\u00f3 s\u1ef1 kh\u00e1c nhau c\u01a1 b\u1ea3n nh\u01b0 sau:<\/p>\n<ul>\n<li>State: State l\u00e0 d\u1eef li\u1ec7u n\u1ed9i b\u1ed9 trong m\u1ed9t component, cho n\u00ean ch\u1ec9 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng trong component \u0111\u00e3 khai b\u00e1o n\u00f3 m\u00e0 th\u00f4i.<\/li>\n<li>Props: D\u1eef li\u1ec7u \u0111\u1ef1c chuy\u1ec1n qua c\u00e1c component, component cha truy\u1ec1n cho component con v\u00e0 khi component con nh\u1eadn th\u00ec ch\u1ec9 c\u00f3 th\u1ec3 \u0111\u1ecdc ch\u1ee9 kh\u00f4ng th\u1ebf thay \u0111\u1ed5i gi\u00e1 tr\u1ecb<\/li>\n<\/ul>\n<h2><span id=\"Mot_so_luu_y_khi_su_dung_State\">M\u1ed9t s\u1ed1 l\u01b0u \u00fd khi s\u1eed d\u1ee5ng State<\/span><\/h2>\n<p>\u0110\u1ec3 vi\u1ec7c s\u1eed d\u1ee5ng state \u0111\u01b0\u1ee3c d\u1ec5 d\u00e0ng v\u00e0 tr\u00e1nh g\u00e2y ra l\u1ed7i ngo\u00e0i \u00fd mu\u1ed1n th\u00ec m\u00ecnh s\u1ebd li\u1ec7t k\u00ea m\u1ed9t s\u1ed1 l\u01b0u \u00fd nh\u01b0 sau:<\/p>\n<ul>\n<li>B\u1ea1n n\u00ean \u0111\u1ec3 c\u1ea5u tr\u00fac d\u1eef li\u1ec7u c\u1ee7a state \u0111\u01a1n gi\u1ea3n nh\u1ea5t c\u00f3 th\u1ec3, kh\u00f4ng n\u00ean t\u1ea1o c\u1ea5u tr\u00fac qu\u00e1 l\u1eb1ng nh\u1eb1ng s\u1ebd kh\u00f3 thao t\u00e1c v\u00e0 \u1ea3nh h\u01b0\u1edfng hi\u1ec7u n\u0103ng<\/li>\n<li>Kh\u00f4ng thay \u0111\u1ed5i state m\u1ed9t c\u00e1ch tr\u1ef1c ti\u1ebfp<\/li>\n<li>State \u0111\u01b0\u1ee3c update kh\u00f4ng \u0111\u1ed3ng b\u1ed9 n\u00ean b\u1ea1n c\u1ea7n l\u01b0u \u00fd khi s\u1eed d\u1ee5ng h\u00e0m\u00a0<code>setState<\/code>\u00a0c\u1ea7n gi\u00e1 tr\u1ecb t\u1eeb state tr\u01b0\u1edbc<\/li>\n<\/ul>\n<h2><span id=\"Khi_nao_nen_su_dung_state_va_khi_nao_nen_dung_props\">Khi n\u00e0o n\u00ean s\u1eed d\u1ee5ng state v\u00e0 khi n\u00e0o n\u00ean d\u00f9ng props<\/span><\/h2>\n<p>V\u1eady khi n\u00e0o th\u00ec n\u00ean s\u1eed d\u1ee5ng state v\u00e0 khi n\u00e0o th\u00ec n\u00ean d\u00f9ng Props?<\/p>\n<p>Khi b\u1ea1n ch\u1ec9 mu\u1ed1n s\u1eed d\u1ee5ng d\u1eef li\u1ec7u n\u1ed9i b\u1ed9 trong component \u0111\u00f3 th\u00ec c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng state, v\u00ec n\u00f3 c\u00f3 th\u1ec3 thay \u0111\u1ed5i gi\u00e1 tr\u1ecb tu\u1ef3 \u00fd<\/p>\n<p>C\u00f2n n\u1ebfu b\u1ea1n mu\u1ed1n truy\u1ec1n gi\u00e1 tr\u1ecb qua m\u1ed9t component kh\u00e1c th\u00ec b\u1ea1n c\u1ea7n d\u00f9ng \u0111\u1ebfn props<\/p>\n<h2><span id=\"Vi_du_thuc_te\">V\u00ed d\u1ee5 th\u1ef1c t\u1ebf<\/span><\/h2>\n<p>B\u00e2y gi\u1edd ch\u00fang ta s\u1ebd x\u00e9t m\u1ed9t v\u00ed d\u1ee5 th\u1ef1c t\u1ebf, k\u1ebft h\u1ee3p gi\u1eefa state v\u00e0 props<\/p>\n<p>V\u1ea5n \u0111\u1ec1: C\u00f3 2 component\u00a0<code>App.js<\/code>\u00a0v\u00e0\u00a0<code>Author.js<\/code>. Trong component\u00a0<code>App<\/code>\u00a0s\u1ebd ch\u1ee9a state\u00a0<code>name<\/code>\u00a0hi\u1ec3n th\u1ecb ph\u1ea7n\u00a0<code>Your name: name<\/code>\u00a0c\u00f2n component\u00a0<code>Author<\/code>\u00a0s\u1ebd ch\u1ee9a ph\u1ea7n\u00a0<code>input<\/code><\/p>\n<p>L\u00e0m sao \u0111\u1ec3 khi input \u1edf component\u00a0<code>Author<\/code>\u00a0s\u1ebd c\u00f3 th\u1ec3 update state \u1edf component\u00a0<code>App<\/code><\/p>\n<p>V\u00e0 \u0111\u00e2y l\u00e0 k\u1ebft qu\u1ea3 \u0111\u1ea1t \u0111\u01b0\u1ee3c<\/p>\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" class=\"wp-image-785 loaded\" title=\"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) 3\" src=\"https:\/\/static.vomanhkien.com\/files\/20200928154136\/state-and-props.gif\" alt=\"state and props\" data-lazy=\"true\" \/><figcaption>Demo k\u1ebft h\u1ee3p state v\u00e0 props<\/figcaption><\/figure>\n<p>B\u1ea1n h\u00e3y th\u1eed l\u00e0m v\u00e0 th\u1eed suy ngh\u0129 xem sao, \u1edf d\u01b0\u1edbi b\u1ea1n c\u00f3 th\u1ec3 xem code \u0111\u1ea7y \u0111\u1ee7.<\/p>\n<h2><span id=\"Ket_luan\">K\u1ebft lu\u1eadn<\/span><\/h2>\n<p>Nh\u01b0 v\u1eady trong b\u00e0i vi\u1ebft n\u00e0y, m\u00ecnh \u0111\u00e3 gi\u1edbi thi\u1ec7u \u0111\u1ebfn b\u1ea1n\u00a0<strong>State trong ReactJS<\/strong>. M\u00ecnh xin nh\u1eafc l\u1ea1i, \u0111\u00e2y l\u00e0 ki\u1ebfn th\u1ee9c quan tr\u1ecdng b\u1ea1n c\u1ea7n t\u00ecm hi\u1ec3u k\u1ef9 v\u00e0 hi\u1ec3u n\u00f3.<\/p>\n<p>N\u1ebfu c\u00f3 th\u1eafc m\u1eafc g\u00ec b\u1ea1n c\u00f3 th\u1ec3 comment b\u00ean d\u01b0\u1edbi\u00a0c\u00f9ng th\u1ea3o lu\u1eadn.<\/p>\n<p>H\u1eb9n g\u1eb7p b\u1ea1n trong nh\u1eefng b\u00e0i ti\u1ebfp theo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>State trong ReactJS l\u00e0 g\u00ec? State l\u00e0 m\u1ed9t object, l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quan tr\u1ecdng \u0111\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t\u00a0component. State c\u00f3 t\u00e1c d\u1ee5ng l\u01b0u tr\u1eef d\u1eef li\u1ec7u c\u1ee7a m\u1ed9t component v\u00e0 ch\u1ec9 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong n\u1ed9i b\u1ed9 m\u1ed9t component m\u00e0 th\u00f4i. Khi gi\u00e1 tr\u1ecb c\u1ee7a state \u0111\u01b0\u1ee3c thay \u0111\u1ed5i th\u00ec \u0111\u1ed3ng ngh\u0129a component \u0111\u00f3 [&#8230;]\n","protected":false},"author":1,"featured_media":2144,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[462],"tags":[503,505,507],"class_list":["post-2370","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lap-trinh","tag-props","tag-reactjs","tag-state"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) - 5M Technologies<\/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:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) - 5M Technologies\" \/>\n<meta property=\"og:description\" content=\"State trong ReactJS l\u00e0 g\u00ec? State l\u00e0 m\u1ed9t object, l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quan tr\u1ecdng \u0111\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t\u00a0component. State c\u00f3 t\u00e1c d\u1ee5ng l\u01b0u tr\u1eef d\u1eef li\u1ec7u c\u1ee7a m\u1ed9t component v\u00e0 ch\u1ec9 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong n\u1ed9i b\u1ed9 m\u1ed9t component m\u00e0 th\u00f4i. Khi gi\u00e1 tr\u1ecb c\u1ee7a state \u0111\u01b0\u1ee3c thay \u0111\u1ed5i th\u00ec \u0111\u1ed3ng ngh\u0129a component \u0111\u00f3 [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\" \/>\n<meta property=\"og:site_name\" content=\"5M Technologies\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/5mtech.vn\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/5mtech.vn\" \/>\n<meta property=\"article:published_time\" content=\"2021-03-07T16:16:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/03\/laraveldevelopment-e1614614362779.png\" \/>\n\t<meta property=\"og:image:width\" content=\"321\" \/>\n\t<meta property=\"og:image:height\" content=\"390\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 ph\u00fat\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/person\\\/461255659c993d6b75b9fee0e2965c57\"},\"headline\":\"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh)\",\"datePublished\":\"2021-03-07T16:16:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\"},\"wordCount\":930,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/03\\\/laraveldevelopment-e1614614362779.png\",\"keywords\":[\"Props\",\"reactjs\",\"state\"],\"articleSection\":[\"L\u1eadp tr\u00ecnh\"],\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\",\"name\":\"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) - 5M Technologies\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/03\\\/laraveldevelopment-e1614614362779.png\",\"datePublished\":\"2021-03-07T16:16:05+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#breadcrumb\"},\"inLanguage\":\"vi\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/03\\\/laraveldevelopment-e1614614362779.png\",\"contentUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/03\\\/laraveldevelopment-e1614614362779.png\",\"width\":321,\"height\":390},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/tin-tuc\\\/lap-trinh\\\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Trang ch\u1ee7\",\"item\":\"https:\\\/\\\/5mtech.vn\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#website\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/\",\"name\":\"5M Technologies\",\"description\":\"Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng\",\"publisher\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/5mtech.vn\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"vi\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#organization\",\"name\":\"5M Technologies\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/logo.png\",\"contentUrl\":\"https:\\\/\\\/5mtech.vn\\\/5mtech-core-frontend\\\/uploads\\\/2021\\\/02\\\/logo.png\",\"width\":819,\"height\":969,\"caption\":\"5M Technologies\"},\"image\":{\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/5mtech.vn\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UC--7vNJHf_iGGodO1yLgKKg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/5mtech.vn\\\/#\\\/schema\\\/person\\\/461255659c993d6b75b9fee0e2965c57\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"vi\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"description\":\"5M Technologies - Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng\",\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/5mtech.vn\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) - 5M Technologies","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:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html","og_locale":"vi_VN","og_type":"article","og_title":"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) - 5M Technologies","og_description":"State trong ReactJS l\u00e0 g\u00ec? State l\u00e0 m\u1ed9t object, l\u00e0 m\u1ed9t th\u00e0nh ph\u1ea7n quan tr\u1ecdng \u0111\u1ec3 x\u00e2y d\u1ef1ng m\u1ed9t\u00a0component. State c\u00f3 t\u00e1c d\u1ee5ng l\u01b0u tr\u1eef d\u1eef li\u1ec7u c\u1ee7a m\u1ed9t component v\u00e0 ch\u1ec9 \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong n\u1ed9i b\u1ed9 m\u1ed9t component m\u00e0 th\u00f4i. Khi gi\u00e1 tr\u1ecb c\u1ee7a state \u0111\u01b0\u1ee3c thay \u0111\u1ed5i th\u00ec \u0111\u1ed3ng ngh\u0129a component \u0111\u00f3 [...]","og_url":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html","og_site_name":"5M Technologies","article_publisher":"https:\/\/www.facebook.com\/5mtech.vn","article_author":"https:\/\/www.facebook.com\/5mtech.vn","article_published_time":"2021-03-07T16:16:05+00:00","og_image":[{"width":321,"height":390,"url":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/03\/laraveldevelopment-e1614614362779.png","type":"image\/png"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"admin","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"5 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#article","isPartOf":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html"},"author":{"name":"admin","@id":"https:\/\/5mtech.vn\/#\/schema\/person\/461255659c993d6b75b9fee0e2965c57"},"headline":"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh)","datePublished":"2021-03-07T16:16:05+00:00","mainEntityOfPage":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html"},"wordCount":930,"commentCount":0,"publisher":{"@id":"https:\/\/5mtech.vn\/#organization"},"image":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage"},"thumbnailUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/03\/laraveldevelopment-e1614614362779.png","keywords":["Props","reactjs","state"],"articleSection":["L\u1eadp tr\u00ecnh"],"inLanguage":"vi","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html","url":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html","name":"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh) - 5M Technologies","isPartOf":{"@id":"https:\/\/5mtech.vn\/#website"},"primaryImageOfPage":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage"},"image":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage"},"thumbnailUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/03\/laraveldevelopment-e1614614362779.png","datePublished":"2021-03-07T16:16:05+00:00","breadcrumb":{"@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#primaryimage","url":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/03\/laraveldevelopment-e1614614362779.png","contentUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/03\/laraveldevelopment-e1614614362779.png","width":321,"height":390},{"@type":"BreadcrumbList","@id":"https:\/\/5mtech.vn\/tin-tuc\/lap-trinh\/tim-hieu-state-trong-reactjs-co-vi-du-thuc-hanh.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Trang ch\u1ee7","item":"https:\/\/5mtech.vn\/"},{"@type":"ListItem","position":2,"name":"T\u00ecm hi\u1ec3u State trong ReactJS (C\u00f3 v\u00ed d\u1ee5 th\u1ef1c h\u00e0nh)"}]},{"@type":"WebSite","@id":"https:\/\/5mtech.vn\/#website","url":"https:\/\/5mtech.vn\/","name":"5M Technologies","description":"Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng","publisher":{"@id":"https:\/\/5mtech.vn\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/5mtech.vn\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/5mtech.vn\/#organization","name":"5M Technologies","url":"https:\/\/5mtech.vn\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/5mtech.vn\/#\/schema\/logo\/image\/","url":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/logo.png","contentUrl":"https:\/\/5mtech.vn\/5mtech-core-frontend\/uploads\/2021\/02\/logo.png","width":819,"height":969,"caption":"5M Technologies"},"image":{"@id":"https:\/\/5mtech.vn\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/5mtech.vn","https:\/\/www.youtube.com\/channel\/UC--7vNJHf_iGGodO1yLgKKg"]},{"@type":"Person","@id":"https:\/\/5mtech.vn\/#\/schema\/person\/461255659c993d6b75b9fee0e2965c57","name":"admin","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/secure.gravatar.com\/avatar\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bd8af4d58e4f5b24d627ddb4eb86cb966d75f265e634ff7928a7ccb3557bf20e?s=96&d=mm&r=g","caption":"admin"},"description":"5M Technologies - Cung c\u1ea5p gi\u1ea3i ph\u00e1p c\u00f4ng ngh\u1ec7 th\u00f4ng tin v\u00e0 truy\u1ec1n th\u00f4ng","sameAs":["https:\/\/www.facebook.com\/5mtech.vn"]}]}},"_links":{"self":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts\/2370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/comments?post=2370"}],"version-history":[{"count":1,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts\/2370\/revisions"}],"predecessor-version":[{"id":2371,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/posts\/2370\/revisions\/2371"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/media\/2144"}],"wp:attachment":[{"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/media?parent=2370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/categories?post=2370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/5mtech.vn\/api\/wp\/v2\/tags?post=2370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}