{"id":373601,"date":"2023-04-03T04:14:35","date_gmt":"2023-04-03T04:14:35","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=373601"},"modified":"2023-04-05T10:13:51","modified_gmt":"2023-04-05T10:13:51","slug":"react-state","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/react-state\/","title":{"rendered":"What are State and uses of state in react"},"content":{"rendered":"\n

In the previous article on ReactJS | Props<\/a>, we got to know that React props can be broadly classified into Functional<\/strong> and Class<\/strong> Components. Also seen that Functional Components are faster and much simpler than Class Components. The primary difference between the two is the availability of the State.<\/p>\n\n\n\n

State<\/h2>\n\n\n\n

The state is an instance of React Component, Class can be defined as an object of a set of observable<\/strong> properties that control the behavior of the component.<\/p>\n\n\n\n

In React, state refers to an object that stores data that is relevant to a component. This data can be anything, from a single value to a complex object. The state of a component can be updated using the\u00a0setState()<\/code>\u00a0method, which is a built-in method of React.<\/p>\n\n\n\n

The main reason for using state in React is to enable the creation of dynamic and interactive user interfaces. By storing data in a component’s state, the component can update its view in response to user interactions or changes in the application’s data.<\/p>\n\n\n\n

The\u00a0state<\/code>\u00a0object is where you can store property values that belongs to the component.When the\u00a0state<\/code>\u00a0object changes the component re-renders.<\/p>\n\n\n\n

Life cycle of state<\/h2>\n\n\n\n
\"state-life-cycle\"<\/figure>\n\n\n\n

Creating the state<\/mark><\/code> Object Using Class Component<\/h2>\n\n\n\n

The state<\/mark><\/code> object is initialized in the constructor:<\/p>\n\n\n\n

class Book extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {author: \"Tom\"};\n  }\n  render() {\n    return (\n      <div>\n        <h1>My Book<\/h1>\n      <\/div>\n    );\n  }\n}\n<\/pre>\n\n\n\n
The state<\/code> object can contain many properties like:<\/p>\n\n\n\n
class Book extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      author: \"Dr Agrawal\",\n      title: \"Mathematics\",\n      price: \"$10\",\n      publish: 2018\n    };\n  }\n  render() {\n    return (\n      <div>\n        <h1>My Book<\/h1>\n      <\/div>\n    );\n  }\n}<\/pre>\n\n\n\n
Use the state<\/code> Object<\/h2>\n\n\n\n
Refer to the state<\/code> object anywhere in the component by using the this.state.propertyname<\/em><\/strong><\/code> syntax:<\/p>\n\n\n\n
Refer the state object into the render() method.<\/strong><\/p>\n\n\n\n
class Book extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      author: \"Dr Agrawal\",\n      title: \"Mathematics\",\n      price: \"$10\",\n      publish: 2018\n    };\n  }\n  render() {\n    return (\n      <div>\n        <h1>My {this.state.title}<\/h1>\n        <p>\n          written by {this.state.title} book and price is\n          {this.state.price}\n          publish in {this.state.publish}.\n        <\/p>\n      <\/div>\n    );\n  }\n}<\/pre>\n\n\n\n
Changing the state<\/code> Object<\/h2>\n\n\n\n
To change a value in the state object, use the this.setState()<\/code> method.<\/p>\n\n\n\n
When a value in the state<\/code> object changes, the component will re-render, meaning that the output will change according to the new value(s).<\/p>\n\n\n\n
onClick<\/code> event that will change the price property:<\/p>\n\n\n\n
class Book extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      author: \"Dr Agrawal\",\n      title: \"Mathematics\",\n      price: \"$10\",\n      publish: 2018\n    };\n  }\n  changePrice = () => {\n    this.setState({price: \"$15\"});\n  }\n  render() {\n    return (\n      <div>\n        <h1>My {this.state.title}<\/h1>\n        <p>\n          written by {this.state.author} and price is\n          {this.state.price}\n          publish in {this.state.publish}.\n        <\/p>\n        <button\n          type=\"button\"\n          onClick={this.changeprice}\n        >Change price<\/button>\n      <\/div>\n    );\n  }\n}<\/pre>\n\n\n\n
Always use the setState()<\/mark><\/code> method to change the state object, it will ensure that the component knows its been updated and calls the render() method (and all the other lifecycle methods).<\/p>\n\n\n\n
For more details, you can follow the document. See the blog\u00a0click<\/a>\u00a0here

<\/p>\n","protected":false},"excerpt":{"rendered":"
In the previous article on ReactJS | Props, we got to know that React props can be broadly classified into Functional and Class Components. Also seen that Functional Components are faster and much simpler than Class Components. The primary difference between the two is the availability of the State. State The state is an instance of React Component, Class can […]<\/a><\/p>\n","protected":false},"author":508,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-373601","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nWhat are State and uses of state in react - Webkul Blog<\/title>\n<meta name=\"description\" content=\"React states and use of states,states management in components,manage state in class components,state object with class component\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/react-state\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What are State and uses of state in react - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"React states and use of states,states management in components,manage state in class components,state object with class component\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/react-state\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-03T04:14:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-05T10:13:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg\" \/>\n<meta name=\"author\" content=\"Gaurav Singh\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gaurav Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/\"},\"author\":{\"name\":\"Gaurav Singh\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9e346a792c1f4cf654b8f7a8ddea4f1c\"},\"headline\":\"What are State and uses of state in react\",\"datePublished\":\"2023-04-03T04:14:35+00:00\",\"dateModified\":\"2023-04-05T10:13:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/\"},\"wordCount\":359,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/react-state\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/\",\"url\":\"https:\/\/webkul.com\/blog\/react-state\/\",\"name\":\"What are State and uses of state in react - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg\",\"datePublished\":\"2023-04-03T04:14:35+00:00\",\"dateModified\":\"2023-04-05T10:13:51+00:00\",\"description\":\"React states and use of states,states management in components,manage state in class components,state object with class component\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/react-state\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg\",\"width\":601,\"height\":322,\"caption\":\"state-life-cycle\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/react-state\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What are State and uses of state in react\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9e346a792c1f4cf654b8f7a8ddea4f1c\",\"name\":\"Gaurav Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2be9fca71131c8014ae06e60b978ec93431494ca0641e0eb802b5fcbdc0a9bcd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2be9fca71131c8014ae06e60b978ec93431494ca0641e0eb802b5fcbdc0a9bcd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Gaurav Singh\"},\"sameAs\":[\"http:\/\/webkul.com\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/gaurav-singh737\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What are State and uses of state in react - Webkul Blog","description":"React states and use of states,states management in components,manage state in class components,state object with class component","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:\/\/webkul.com\/blog\/react-state\/","og_locale":"en_US","og_type":"article","og_title":"What are State and uses of state in react - Webkul Blog","og_description":"React states and use of states,states management in components,manage state in class components,state object with class component","og_url":"https:\/\/webkul.com\/blog\/react-state\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-04-03T04:14:35+00:00","article_modified_time":"2023-04-05T10:13:51+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg","type":"","width":"","height":""}],"author":"Gaurav Singh","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Gaurav Singh","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/react-state\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/react-state\/"},"author":{"name":"Gaurav Singh","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9e346a792c1f4cf654b8f7a8ddea4f1c"},"headline":"What are State and uses of state in react","datePublished":"2023-04-03T04:14:35+00:00","dateModified":"2023-04-05T10:13:51+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/react-state\/"},"wordCount":359,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/react-state\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/react-state\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/react-state\/","url":"https:\/\/webkul.com\/blog\/react-state\/","name":"What are State and uses of state in react - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/react-state\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/react-state\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg","datePublished":"2023-04-03T04:14:35+00:00","dateModified":"2023-04-05T10:13:51+00:00","description":"React states and use of states,states management in components,manage state in class components,state object with class component","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/react-state\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/react-state\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/react-state\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/04\/state-life-cycle.jpg","width":601,"height":322,"caption":"state-life-cycle"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/react-state\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What are State and uses of state in react"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9e346a792c1f4cf654b8f7a8ddea4f1c","name":"Gaurav Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2be9fca71131c8014ae06e60b978ec93431494ca0641e0eb802b5fcbdc0a9bcd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2be9fca71131c8014ae06e60b978ec93431494ca0641e0eb802b5fcbdc0a9bcd?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Gaurav Singh"},"sameAs":["http:\/\/webkul.com"],"url":"https:\/\/webkul.com\/blog\/author\/gaurav-singh737\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373601","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/508"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=373601"}],"version-history":[{"count":34,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373601\/revisions"}],"predecessor-version":[{"id":376057,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/373601\/revisions\/376057"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=373601"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=373601"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=373601"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}