{"id":7144,"date":"2019-06-08T19:50:04","date_gmt":"2019-06-08T19:50:04","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=7144"},"modified":"2019-06-08T19:50:04","modified_gmt":"2019-06-08T19:50:04","slug":"react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/react-material-ui-invalid-hook-call-hooks-can-only-be-called-inside-of-the-body-of-a-function-component\/","title":{"rendered":"React &#038; Material UI &#8220;Invalid hook call. Hooks can only be called inside of the body of a function component&#8221;"},"content":{"rendered":"<p>When looking through some examples of writing Material UI code within React and using TypeScript (within a .tsx file to be precise) you might come across an error at runtime such as <em>&#8220;Invalid hook call. Hooks can only be called inside of the body of a function component&#8221;<\/em>.<\/p>\n<p>Here&#8217;s an example of the code which causes this error<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nimport React, { Component }  from &quot;react&quot;;\r\nimport AddIcon from &quot;@material-ui\/icons\/Add&quot;;\r\nimport { Fab } from &quot;@material-ui\/core&quot;;\r\nimport { makeStyles } from &quot;@material-ui\/core\/styles&quot;;\r\n\r\nconst useStyles = makeStyles(theme =&gt; ({\r\n   fab: {\r\n      margin: theme.spacing(1),\r\n   },\r\n}));\r\n\r\nconst classes = useStyles();\r\n\r\nexport default class SampleComponent extends Component&lt;{}, {}&gt; {\r\n   public render() {\r\n      return (\r\n         &lt;div&gt;\r\n            &lt;Fab color=&quot;primary&quot; aria-label=&quot;Add&quot; className={classes.fab}&gt;&lt;AddIcon \/&gt;&lt;\/Fab&gt;\r\n         &lt;\/div&gt;\r\n       );\r\n   }\r\n}\r\n<\/pre>\n<p>What we need to do is wrap the <em>useStyles<\/em> code in a function and replace the code which uses it, so for example<\/p>\n<pre class=\"brush: java; title: ; notranslate\" title=\"\">\r\nconst SampleFab = () =&gt; {\r\n   const classes = useStyles();\r\n   return &lt;Fab color=&quot;primary&quot; aria-label=&quot;Add&quot; className={classes.fab}&gt;&lt;AddIcon \/&gt;&lt;\/Fab&gt;;\r\n}\r\n\r\nexport default class SampleComponent extends Component&lt;{}, {}&gt; {\r\n   public render() {\r\n      return (\r\n         &lt;div&gt;\r\n            &lt;SampleFab \/&gt;\r\n         &lt;\/div&gt;\r\n      );\r\n   }\r\n}\r\n<\/pre>\n<p>This also shows how we can create reusable components from just a simple function.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When looking through some examples of writing Material UI code within React and using TypeScript (within a .tsx file to be precise) you might come across an error at runtime such as &#8220;Invalid hook call. Hooks can only be called inside of the body of a function component&#8221;. Here&#8217;s an example of the code which [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[250,243,46],"tags":[],"class_list":["post-7144","post","type-post","status-publish","format-standard","hentry","category-material-ui-2","category-react","category-typescript"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=7144"}],"version-history":[{"count":2,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7144\/revisions"}],"predecessor-version":[{"id":7146,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/7144\/revisions\/7146"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=7144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=7144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=7144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}