{"id":266,"date":"2020-12-24T07:34:56","date_gmt":"2020-12-24T07:34:56","guid":{"rendered":"https:\/\/codeflarelimited.com\/blog\/?p=266"},"modified":"2021-05-31T05:16:27","modified_gmt":"2021-05-31T04:16:27","slug":"react-native-working-with-state","status":"publish","type":"post","link":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/","title":{"rendered":"React Native: Working With State"},"content":{"rendered":"\n<p>When working with React, in this case <a href=\"https:\/\/codeflarelimited.com\/blog\/2020\/11\/17\/beginning-with-react-native\/\" target=\"_blank\" rel=\"noreferrer noopener\">React Native<\/a>, there are times when you might need a value to be globally accessible by a particular component and you, for some reason as it suits your application, want to constantly update that value.<\/p>\n\n\n\n<p>React provides a sleek way of doing so using states. React lets you update that value as it&#8217;s necessary for your application to run, and then we say you&#8217;re updating the state of that object variable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-do-you-set-state\">How Do You Set State?<\/h3>\n\n\n\n<p>States can be initialized in the constructor. Usually, you would set it to an initial value which sometimes can even be empty, but that depends on the logic of your application.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">constructor(props){\nsuper(props){\nthis.state = {\nname: '',\n}\n}\n}<\/code><\/pre>\n\n\n\n<p>Also note that you can set more than one state value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-how-do-you-access-state\">How Do You Access State?<\/h3>\n\n\n\n<p>Values stored in the state are more or less objects and can be accessed using <em><strong>this <\/strong><\/em>keyword, e.g., <em>this.state.name<\/em>. <\/p>\n\n\n\n<p>In JSX we often access and print out variables in curly braces, and the same means apply to printing out state values as well.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"h-let-s-see-a-quick-example\">Let&#8217;s see a quick example<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { Component } from 'react';\nimport { View, Text } from 'react-native';\n\n\nclass YourClassName extends Component{\n\n\/\/Intialize state\nconstructor(props){\nsuper(props){\nthis.state = {\nname: '';\n}\n\n\/\/Update state\nthis.setState({name: 'Lawson Luke'});\n\nrender(){\nreturn(\n&lt;View&gt;\n&lt;Text&gt;{this.state.name}&lt;\/Text&gt; \/\/Lawson Luke\n&lt;\/View&gt;\n)\n}\n}\n\nexport default YourClassName;<\/code><\/pre>\n\n\n\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link\" href=\"https:\/\/codeflarelimited.com\/catalogue\/cross-platform-app-development-training\" target=\"_blank\" rel=\"noreferrer noopener\">Begin your react native journey<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When working with React, in this case React Native, there are times when you might need a value<\/p>\n","protected":false},"author":1,"featured_media":267,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[31],"tags":[],"class_list":["post-266","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Native: Working With State<\/title>\n<meta name=\"description\" content=\"React provides a sleek way of doing so using states. React lets you update that value as it&#039;s necessary for your application to run,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native: Working With State\" \/>\n<meta property=\"og:description\" content=\"React provides a sleek way of doing so using states. React lets you update that value as it&#039;s necessary for your application to run,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/facebook.com\/codeflretech\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-24T07:34:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-31T04:16:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png\" \/>\n\t<meta property=\"og:image:width\" content=\"5000\" \/>\n\t<meta property=\"og:image:height\" content=\"2778\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"codeflare\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codeflaretech\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"TechArticle\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/\"},\"author\":{\"name\":\"codeflare\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\"},\"headline\":\"React Native: Working With State\",\"datePublished\":\"2020-12-24T07:34:56+00:00\",\"dateModified\":\"2021-05-31T04:16:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/\"},\"wordCount\":191,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/atom.png\",\"articleSection\":[\"react native\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/\",\"name\":\"React Native: Working With State\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/atom.png\",\"datePublished\":\"2020-12-24T07:34:56+00:00\",\"dateModified\":\"2021-05-31T04:16:27+00:00\",\"description\":\"React provides a sleek way of doing so using states. React lets you update that value as it's necessary for your application to run,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#primaryimage\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/atom.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/atom.png\",\"width\":5000,\"height\":2778,\"caption\":\"software development training in abuja\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native-working-with-state\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"react native\",\"item\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/react-native\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"React Native: Working With State\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"name\":\"\",\"description\":\"Sustainable solutions\",\"publisher\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#organization\",\"name\":\"Codeflare Limited\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"contentUrl\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/11\\\/codeflare.png\",\"width\":1040,\"height\":263,\"caption\":\"Codeflare Limited\"},\"image\":{\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/#\\\/schema\\\/person\\\/7e65653d49add95629f8c1053c5cd76a\",\"name\":\"codeflare\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g\",\"caption\":\"codeflare\"},\"description\":\"Latest tech news and coding tips.\",\"sameAs\":[\"https:\\\/\\\/codeflarelimited.com\\\/blog\",\"https:\\\/\\\/facebook.com\\\/codeflretech\",\"https:\\\/\\\/instagram.com\\\/codeflaretech\",\"https:\\\/\\\/x.com\\\/codeflaretech\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1\"],\"url\":\"https:\\\/\\\/codeflarelimited.com\\\/blog\\\/author\\\/watcher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native: Working With State","description":"React provides a sleek way of doing so using states. React lets you update that value as it's necessary for your application to run,","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:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/","og_locale":"en_US","og_type":"article","og_title":"React Native: Working With State","og_description":"React provides a sleek way of doing so using states. React lets you update that value as it's necessary for your application to run,","og_url":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/","article_author":"https:\/\/facebook.com\/codeflretech","article_published_time":"2020-12-24T07:34:56+00:00","article_modified_time":"2021-05-31T04:16:27+00:00","og_image":[{"width":5000,"height":2778,"url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png","type":"image\/png"}],"author":"codeflare","twitter_card":"summary_large_image","twitter_creator":"@codeflaretech","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"TechArticle","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#article","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/"},"author":{"name":"codeflare","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a"},"headline":"React Native: Working With State","datePublished":"2020-12-24T07:34:56+00:00","dateModified":"2021-05-31T04:16:27+00:00","mainEntityOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/"},"wordCount":191,"commentCount":0,"publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png","articleSection":["react native"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/","url":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/","name":"React Native: Working With State","isPartOf":{"@id":"https:\/\/codeflarelimited.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#primaryimage"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#primaryimage"},"thumbnailUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png","datePublished":"2020-12-24T07:34:56+00:00","dateModified":"2021-05-31T04:16:27+00:00","description":"React provides a sleek way of doing so using states. React lets you update that value as it's necessary for your application to run,","breadcrumb":{"@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#primaryimage","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png","width":5000,"height":2778,"caption":"software development training in abuja"},{"@type":"BreadcrumbList","@id":"https:\/\/codeflarelimited.com\/blog\/react-native-working-with-state\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codeflarelimited.com\/blog\/"},{"@type":"ListItem","position":2,"name":"react native","item":"https:\/\/codeflarelimited.com\/blog\/react-native\/"},{"@type":"ListItem","position":3,"name":"React Native: Working With State"}]},{"@type":"WebSite","@id":"https:\/\/codeflarelimited.com\/blog\/#website","url":"https:\/\/codeflarelimited.com\/blog\/","name":"","description":"Sustainable solutions","publisher":{"@id":"https:\/\/codeflarelimited.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codeflarelimited.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codeflarelimited.com\/blog\/#organization","name":"Codeflare Limited","url":"https:\/\/codeflarelimited.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","contentUrl":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/11\/codeflare.png","width":1040,"height":263,"caption":"Codeflare Limited"},"image":{"@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/codeflarelimited.com\/blog\/#\/schema\/person\/7e65653d49add95629f8c1053c5cd76a","name":"codeflare","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/59cef917c86d965eea581d2747f51bd6382003a68bfce7c8a4dfec98b4cd838d?s=96&d=mm&r=g","caption":"codeflare"},"description":"Latest tech news and coding tips.","sameAs":["https:\/\/codeflarelimited.com\/blog","https:\/\/facebook.com\/codeflretech","https:\/\/instagram.com\/codeflaretech","https:\/\/x.com\/codeflaretech","https:\/\/www.youtube.com\/channel\/UCuBLtiYqsajHdqw0uyt7Ofw?sub_confirmation=1"],"url":"https:\/\/codeflarelimited.com\/blog\/author\/watcher\/"}]}},"jetpack_featured_media_url":"https:\/\/codeflarelimited.com\/blog\/wp-content\/uploads\/2020\/12\/atom.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/266","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/comments?post=266"}],"version-history":[{"count":3,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/266\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/posts\/266\/revisions\/643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media\/267"}],"wp:attachment":[{"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/media?parent=266"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/categories?post=266"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeflarelimited.com\/blog\/wp-json\/wp\/v2\/tags?post=266"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}