{"id":3408,"date":"2016-03-15T23:10:52","date_gmt":"2016-03-15T23:10:52","guid":{"rendered":"http:\/\/www.garysieling.com\/blog\/?p=3408"},"modified":"2016-03-15T23:10:52","modified_gmt":"2016-03-15T23:10:52","slug":"fixing-react-error-invariant-violation-reactclass-youre-attempting-use-component-class-mixin-instead-just-use-regular-object","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/fixing-react-error-invariant-violation-reactclass-youre-attempting-use-component-class-mixin-instead-just-use-regular-object\/","title":{"rendered":"Fixing React error: Invariant Violation: ReactClass: You’re attempting to use a component class as a mixin. Instead, just use a regular object."},"content":{"rendered":"

Let’s say you convert an old React object-class to an ES6 object, resulting in the following code:<\/p>\n

\nclass MyComponent extends React.Component {\n  render() {\n    return 
Hello!<\/div>;\n  }\n}\n\nReact.createClass(MyComponent);\n<\/pre>\n
This can give you an error:<\/p>\n
\nreact-with-addons.js:20261 Uncaught Error: Invariant Violation: ReactClass: You're attempting to use a component class as a mixin. Instead, just use a regular object.\n<\/pre>\n
The correct answer is to use “MyComponent” directly, like so:<\/p>\n
\nreturn \n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Let’s say you convert an old React object-class to an ES6 object, resulting in the following code: class MyComponent extends React.Component { render() { return Hello!; } } React.createClass(MyComponent); This can give you an error: react-with-addons.js:20261 Uncaught Error: Invariant Violation: ReactClass: You’re attempting to use a component class as a mixin. Instead, just use a … <\/p>\n
Continue reading “Fixing React error:  Invariant Violation: ReactClass: You’re attempting to use a component class as a mixin. Instead, just use a regular object.”<\/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":[10],"tags":[],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3408"}],"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=3408"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/3408\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=3408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=3408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=3408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}