{"id":12896,"date":"2023-09-09T06:38:35","date_gmt":"2023-09-09T06:38:35","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=12896"},"modified":"2023-09-09T06:38:36","modified_gmt":"2023-09-09T06:38:36","slug":"state-react","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/state-react\/","title":{"rendered":"State React"},"content":{"rendered":"\n

Komponen React memiliki objek state<\/code>  bawaan.<\/p>\n\n\n\n

Objek State <\/code>adalah di mana kamu menyimpan nilai properti yang dimiliki komponen.<\/p>\n\n\n\n

Ketika objek state <\/code>berubah, komponen akan memberikan ulang.<\/p>\n\n\n\n

Menciptakan Objek <\/strong>State<\/h4>\n\n\n\n

Objek State <\/code>diinisialisasi di constructor:<\/p>\n\n\n\n

Contoh:<\/p>\n\n\n\n

Tentukan\u00a0objek\u00a0state\u00a0<\/code>dalam metode constructor:<\/p>\n\n\n

\nclass Car extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {brand: "Ford"};\n  }\n  render() {\n    return (\n      <div>\n        <h1>My Car<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Objek State <\/code>dapat memuat sebanyak sifat yang kamu suka:<\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
Tentukan semua properti yang dibutuhkan komponen Anda:<\/p>\n\n\n
\nclass Car extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      brand: "Ford",\n      model: "Mustang",\n      color: "red",\n      year: 1964\n    };\n  }\n  render() {\n    return (\n      <div>\n        <h1>My Car<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Menggunakan Objek<\/strong> State<\/h4>\n\n\n\n
Rujuk ke objek state <\/code>di mana saja dalam komponen dengan menggunakan sintaks: this.state.<\/code>propertyname<\/em><\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
Rujuk ke objek state <\/code>dalam metode render()<\/code>:<\/p>\n\n\n
\nclass Car extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      brand: "Ford",\n      model: "Mustang",\n      color: "red",\n      year: 1964\n    };\n  }\n  render() {\n    return (\n      <div>\n        <h1>My {this.state.brand}<\/h1>\n        <p>\n          It is a {this.state.color}\n          {this.state.model}\n          from {this.state.year}.\n        <\/p>\n      <\/div>\n    );\n  }\n}\n<\/pre><\/div>\n\n\n
Mengubah Objek<\/strong> State<\/h4>\n\n\n\n
Untuk mengubah keadaan nilai dalam objek, gunakan metode this.setState()<\/code>.<\/p>\n\n\n\n
Ketika nilai dalam objek state <\/code>berubah, komponen akan memberikan ulang, artinya output akan berubah sesuai dengan nilai yang baru.<\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
Tambahkan tombol dengan\u00a0onClick\u00a0<\/code>yang akan mengubah properti warna:<\/p>\n\n\n
\nclass Car extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      brand: "Ford",\n      model: "Mustang",\n      color: "red",\n      year: 1964\n    };\n  }\n  changeColor = () => {\n    this.setState({color: "blue"});\n  }\n  render() {\n    return (\n      <div>\n        <h1>My {this.state.brand}<\/h1>\n        <p>\n          It is a {this.state.color}\n          {this.state.model}\n          from {this.state.year}.\n        <\/p>\n        <button\n          type="button"\n          onClick={this.changeColor}\n        >Change color<\/button>\n      <\/div>\n    );\n  }\n}\n<\/pre><\/div>","protected":false},"excerpt":{"rendered":"
Komponen React memiliki objek state  bawaan. Objek State adalah di mana kamu menyimpan nilai properti yang dimiliki komponen. Ketika objek state berubah, komponen akan memberikan ulang. Menciptakan Objek State Objek State diinisialisasi di constructor: Contoh: Tentukan\u00a0objek\u00a0state\u00a0dalam<\/p>\n","protected":false},"author":15,"featured_media":10127,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2722],"tags":[4616,4615,4618,4619,4620,4617],"class_list":["post-12896","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-react-js","tag-belajar-react-js-state","tag-belajar-react-js-state-pemula","tag-kursus-react-js-state-bandung","tag-kursus-react-js-state-jakarta","tag-tutorial-react-js-state","tag-tutorial-react-js-state-pemula"],"yoast_head":"\nState React - WebHozz Blog<\/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.webhozz.com\/blog\/state-react\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"State React - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Komponen React memiliki objek state  bawaan. Objek State adalah di mana kamu menyimpan nilai properti yang dimiliki komponen. Ketika objek state berubah, komponen akan memberikan ulang. Menciptakan Objek State Objek State diinisialisasi di constructor: Contoh: Tentukan\u00a0objek\u00a0state\u00a0dalam\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/state-react\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-09T06:38:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-09T06:38:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\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.webhozz.com\\\/blog\\\/state-react\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\"},\"headline\":\"State React\",\"datePublished\":\"2023-09-09T06:38:35+00:00\",\"dateModified\":\"2023-09-09T06:38:36+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/\"},\"wordCount\":137,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"keywords\":[\"Belajar React JS State\",\"Belajar React JS State Pemula\",\"Kursus React JS State Bandung\",\"Kursus React JS State Jakarta\",\"Tutorial React JS State\",\"Tutorial React JS State Pemula\"],\"articleSection\":[\"Belajar React JS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/\",\"name\":\"State React - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"datePublished\":\"2023-09-09T06:38:35+00:00\",\"dateModified\":\"2023-09-09T06:38:36+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logo-reactjs.jpg\",\"width\":750,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/state-react\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"State React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/farry\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"State React - WebHozz Blog","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.webhozz.com\/blog\/state-react\/","og_locale":"en_US","og_type":"article","og_title":"State React - WebHozz Blog","og_description":"Komponen React memiliki objek state  bawaan. Objek State adalah di mana kamu menyimpan nilai properti yang dimiliki komponen. Ketika objek state berubah, komponen akan memberikan ulang. Menciptakan Objek State Objek State diinisialisasi di constructor: Contoh: Tentukan\u00a0objek\u00a0state\u00a0dalam","og_url":"https:\/\/www.webhozz.com\/blog\/state-react\/","og_site_name":"WebHozz Blog","article_published_time":"2023-09-09T06:38:35+00:00","article_modified_time":"2023-09-09T06:38:36+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/state-react\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941"},"headline":"State React","datePublished":"2023-09-09T06:38:35+00:00","dateModified":"2023-09-09T06:38:36+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/state-react\/"},"wordCount":137,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","keywords":["Belajar React JS State","Belajar React JS State Pemula","Kursus React JS State Bandung","Kursus React JS State Jakarta","Tutorial React JS State","Tutorial React JS State Pemula"],"articleSection":["Belajar React JS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/state-react\/","url":"https:\/\/www.webhozz.com\/blog\/state-react\/","name":"State React - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","datePublished":"2023-09-09T06:38:35+00:00","dateModified":"2023-09-09T06:38:36+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/state-react\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/12\/logo-reactjs.jpg","width":750,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/state-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"State React"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/farry\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12896","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=12896"}],"version-history":[{"count":1,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12896\/revisions"}],"predecessor-version":[{"id":12897,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/12896\/revisions\/12897"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/10127"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=12896"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=12896"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=12896"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}