{"id":3411,"date":"2016-03-15T23:23:22","date_gmt":"2016-03-15T23:23:22","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3411"},"modified":"2016-03-15T23:23:22","modified_gmt":"2016-03-15T23:23:22","slug":"fixing-error-warning-getinitialstate-defined-plain-javascript-class-supported-classes-created-using-react-createclass","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/fixing-error-warning-getinitialstate-defined-plain-javascript-class-supported-classes-created-using-react-createclass\/","title":{"rendered":"Fixing error: Warning: getInitialState was defined on a plain JavaScript class. This is only supported for classes created using React.createClass."},"content":{"rendered":"<p>Let&#8217;s say you upgrade an old React component, like so:<\/p>\n<pre lang=\"javascript\">\nclass MyComponent extends React.Component {\n  constructor() {\n    super();\n  }\n\n  getInitialState() {\n    return { test: 1 }\n  }\n\n  render() {\n    render (<div>Hello World!<\/div>);\n  }\n}\n<\/pre>\n<p>When you go to use this, you will get this error:<\/p>\n<pre>\nWarning: getInitialState was defined on a plain JavaScript class. \nThis is only supported for classes created using React.createClass.\n<\/pre>\n<p>React can apparently detect the difference between objects and new ES6 classes, and wants you to use a more conventional class construction technique.<\/p>\n<p>The correct answer is to do what the error says, and move the contents of the getInitialState function into the constructor:<\/p>\n<pre lang=\"javascript\">\nclass MyComponent extends React.Component {\n  constructor() {\n    super();\n\n    this.state = { test: 1 };\n  }\n\n  render() {\n    render (<div>Hello World!<\/div>);\n  }\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s say you upgrade an old React component, like so: class MyComponent extends React.Component { constructor() { super(); } getInitialState() { return { test: 1 } } render() { render (Hello World!); } } When you go to use this, you will get this error: Warning: getInitialState was defined on a plain JavaScript class. This &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/fixing-error-warning-getinitialstate-defined-plain-javascript-class-supported-classes-created-using-react-createclass\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Fixing error: Warning: getInitialState was defined on a plain JavaScript class. This is only supported for classes created using React.createClass.&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[9],"tags":[302,455],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3411"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=3411"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3411\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}