{"id":22504,"date":"2020-09-11T16:40:31","date_gmt":"2020-09-11T23:40:31","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=22504"},"modified":"2020-09-11T16:40:33","modified_gmt":"2020-09-11T23:40:33","slug":"error-setstate-undefined","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/","title":{"rendered":"Error: Cannot read property \u2018setState\u2019 of undefined"},"content":{"rendered":"\n<p>When you first start to write React components, you might encounter several different errors along the way. Two such errors are \u201cCannot read property \u2018setState\u2019 of undefined\u201d and \u201cthis.setState is not a function\u201d. This article takes a look at a couple of ways to make these errors go away.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Why?<\/h2>\n\n\n\n<p>These errors occur because the method you are using or invoking in your React Component is not bound correctly. Here is an example of code that will cause the error to happen (This assumes that you have your React component set up correctly):<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>import React from &quot;react&quot;;\nimport &quot;.\/styles.css&quot;;\n \nclass App extends React.Component {\n constructor(props) {\n   super(props);\n   this.state = {\n     input: &quot;&quot;\n   };\n }\n \n handleChange(e) {\n   this.setState({[e.target.name]: e.target.value})\n }\n render() {\n   console.log(this.state)\n   return (\n     &lt;div className=&quot;App&quot;&gt;\n       &lt;h1&gt;Sample React Application&lt;\/h1&gt;\n       &lt;input name=&quot;input&quot; onChange={this.handleChange} value={this.state.input} type=&quot;text&quot; placeholder=&quot;Type here...&quot;\/&gt;\n       &lt;input type=&quot;submit&quot; \/&gt;\n     &lt;\/div&gt;\n   );\n }\n}\n \nexport default App;<\/pre><\/div>\n\n\n\n<p>At first glance, the code looks all right, but if we look closer, we see the handleChange method is not bound to the App class so the \u201cthis\u201d keyword will refer to the Window in this instance. To take a closer look, let\u2019s add a console.log(this)to both the first line of the handleChange method and then to the first line of the render:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>handleChange(e) {\n   console.log(this, &quot;change&quot;)\n   this.setState({[e.target.name]: e.target.value})\n }<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>render() {\n   console.log(this, &quot;render&quot;)\n   return (\n     &lt;div className=&quot;App&quot;&gt;\n       &lt;h1&gt;Sample React Application&lt;\/h1&gt;\n       &lt;input name=&quot;input&quot; onChange={this.handleChange} value={this.state.input} type=&quot;text&quot; placeholder=&quot;Type here...&quot;\/&gt;\n       &lt;input type=&quot;submit&quot; \/&gt;\n     &lt;\/div&gt;\n   );\n }<\/pre><\/div>\n\n\n\n<p>If we take a look at the console when we load the application, we will see that the \u201cthis\u201d keyword refers to App. If we try to use our input, we get an error on screen, but if we look at the console, we will see that the \u201cthis\u201d keyword there refers to the Window Object, not App. There are two ways to fix this problem:&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Bind The Method<\/h4>\n\n\n\n<p> Inside the constructor, after the state object, input this line:\u00a0<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>   this.handleChange = this.handleChange.bind(this);<\/pre><\/div>\n\n\n\n<p>This line will bind the \u201cthis\u201d keyword to the handleChange method so it can explicitly refer to the App component when invoking the handleChange. Otherwise, the method doesn\u2019t know or see the component you want it to work with.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">2. ES6 Arrow Function<\/h4>\n\n\n\n<p>Use the ES6 syntax for the big arrow function. It automatically binds the \u201cthis\u201d keyword to that method so you don\u2019t have to bind it in the constructor:<br><\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>handleChange = (e) =&gt; {\n   this.setState({[e.target.name]: e.target.value})\n }<\/pre><\/div>\n\n\n\n<p>There you have it! That\u2019s how you get rid of the \u201cthis.setState\u201d is \u201cundefined\u201d or \u201cnot a function\u201d error when using the <a href=\"https:\/\/careerkarma.com\/blog\/react-components\/\">class component<\/a> structure in React. If you would like to prevent these errors in the future, refactor your React component to using functional components with React Hooks instead!\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"When you first start to write React components, you might encounter several different errors along the way. Two such errors are \u201cCannot read property \u2018setState\u2019 of undefined\u201d and \u201cthis.setState is not a function\u201d. This article takes a look at a couple of ways to make these errors go away.&nbsp; Why? These errors occur because the&hellip;","protected":false},"author":77,"featured_media":22505,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11933],"tags":[],"class_list":{"0":"post-22504","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"JavaScript","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":[]},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Error: Cannot Read Property setState of Undefined | Career Karma<\/title>\n<meta name=\"description\" content=\"Learn how to fix a common error in React involving setState in this article by Career Karma!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Error: Cannot read property \u2018setState\u2019 of undefined\" \/>\n<meta property=\"og:description\" content=\"Learn how to fix a common error in React involving setState in this article by Career Karma!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-11T23:40:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-09-11T23:40:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/max-chen-lud4OaUCP4Q-unsplash.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1020\" \/>\n\t<meta property=\"og:image:height\" content=\"765\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Christina Kopecky\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christina Kopecky\" \/>\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:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/\"},\"author\":{\"name\":\"Christina Kopecky\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"headline\":\"Error: Cannot read property \u2018setState\u2019 of undefined\",\"datePublished\":\"2020-09-11T23:40:31+00:00\",\"dateModified\":\"2020-09-11T23:40:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/\"},\"wordCount\":373,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/max-chen-lud4OaUCP4Q-unsplash.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/\",\"name\":\"Error: Cannot Read Property setState of Undefined | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/max-chen-lud4OaUCP4Q-unsplash.jpg\",\"datePublished\":\"2020-09-11T23:40:31+00:00\",\"dateModified\":\"2020-09-11T23:40:33+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\"},\"description\":\"Learn how to fix a common error in React involving setState in this article by Career Karma!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/max-chen-lud4OaUCP4Q-unsplash.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/max-chen-lud4OaUCP4Q-unsplash.jpg\",\"width\":1020,\"height\":765,\"caption\":\"Code on a black screen\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/error-setstate-undefined\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/javascript\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Error: Cannot read property \u2018setState\u2019 of undefined\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/ae0cdc4a5d198690d78482646894074e\",\"name\":\"Christina Kopecky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/06\\\/image-3-150x150.jpg\",\"caption\":\"Christina Kopecky\"},\"description\":\"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.\",\"sameAs\":[\"http:\\\/\\\/www.linkedin.com\\\/in\\\/cmvnk\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/christina-kopecky\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Error: Cannot Read Property setState of Undefined | Career Karma","description":"Learn how to fix a common error in React involving setState in this article by Career Karma!","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:\/\/careerkarma.com\/blog\/error-setstate-undefined\/","og_locale":"en_US","og_type":"article","og_title":"Error: Cannot read property \u2018setState\u2019 of undefined","og_description":"Learn how to fix a common error in React involving setState in this article by Career Karma!","og_url":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-09-11T23:40:31+00:00","article_modified_time":"2020-09-11T23:40:33+00:00","og_image":[{"width":1020,"height":765,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/max-chen-lud4OaUCP4Q-unsplash.jpg","type":"image\/jpeg"}],"author":"Christina Kopecky","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"Christina Kopecky","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/"},"author":{"name":"Christina Kopecky","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"headline":"Error: Cannot read property \u2018setState\u2019 of undefined","datePublished":"2020-09-11T23:40:31+00:00","dateModified":"2020-09-11T23:40:33+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/"},"wordCount":373,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/max-chen-lud4OaUCP4Q-unsplash.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/","url":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/","name":"Error: Cannot Read Property setState of Undefined | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/max-chen-lud4OaUCP4Q-unsplash.jpg","datePublished":"2020-09-11T23:40:31+00:00","dateModified":"2020-09-11T23:40:33+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e"},"description":"Learn how to fix a common error in React involving setState in this article by Career Karma!","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/max-chen-lud4OaUCP4Q-unsplash.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/09\/max-chen-lud4OaUCP4Q-unsplash.jpg","width":1020,"height":765,"caption":"Code on a black screen"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/error-setstate-undefined\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/careerkarma.com\/blog\/javascript\/"},{"@type":"ListItem","position":3,"name":"Error: Cannot read property \u2018setState\u2019 of undefined"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/ae0cdc4a5d198690d78482646894074e","name":"Christina Kopecky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/06\/image-3-150x150.jpg","caption":"Christina Kopecky"},"description":"Christina is an experienced technical writer, covering topics as diverse as Java, SQL, Python, and web development. She earned her Master of Music in flute performance from the University of Kansas and a bachelor's degree in music with minors in French and mass communication from Southeast Missouri State. Prior to joining the Career Karma team in June 2020, Christina was a teaching assistant, team lead, and section lead at Lambda School, where she led student groups, performed code and project reviews, and debugged problems for students. Christina's technical content is featured frequently in publications like Codecademy, Repl.it, and Educative.","sameAs":["http:\/\/www.linkedin.com\/in\/cmvnk"],"url":"https:\/\/careerkarma.com\/blog\/author\/christina-kopecky\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/22504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=22504"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/22504\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/22505"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=22504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=22504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=22504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}