Converting IndexPage to a class

src/pages/index.js

@@ -39,24 +39,8 @@ const readURLHash = (location, defaultSyntax) => {
   }
 };
 
-export const IndexPage = ({
+class IndexPage extends React.PureComponent {
-  location,
+  static propTypes = {
-  data: { site: { siteMetadata } }
-}) => <>
-  <Metadata/>
-  <noscript>
-    <Message type="error" heading="JavaScript Required">
-      <p>You need JavaScript to use Regexper.</p>
-      <p>If you have concerns regarding the use of tracking code on Regexper,
-        please see the <Link to="/privacy">Privacy Policy</Link>.</p>
-    </Message>
-  </noscript>
-  <App
-    syntaxList={ siteMetadata.syntaxList }
-    { ...readURLHash(location, siteMetadata.defaultSyntax) } />
-</>;
-
-IndexPage.propTypes = {
     location: PropTypes.object,
     data: PropTypes.shape({
       site: PropTypes.shape({
@@ -69,6 +53,30 @@ IndexPage.propTypes = {
         })
       })
     })
-};
+  }
+
+  render() {
+    const {
+      location,
+      data: { site: { siteMetadata } }
+    } = this.props;
+
+    return <>
+      <Metadata/>
+      <noscript>
+        <Message type="error" heading="JavaScript Required">
+          <p>You need JavaScript to use Regexper.</p>
+          <p>
+            If you have concerns regarding the use of tracking code on Regexper,
+            please see the <Link to="/privacy">Privacy Policy</Link>.
+          </p>
+        </Message>
+      </noscript>
+      <App
+        syntaxList={ siteMetadata.syntaxList }
+        { ...readURLHash(location, siteMetadata.defaultSyntax) } />
+    </>;
+  }
+}
 
 export default IndexPage;

src/pages/index.test.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { IndexPage } from 'pages/index';
+import IndexPage from 'pages/index';
 
 const queryResult = {
   site: {