chore: use function component on with-typescript example (vercel#12695)

rokinsky · Jul 11, 2020 · 9baf3b5 · 9baf3b5
1 parent 623bb2a
commit 9baf3b5
Showing 1 changed file with 21 additions and 20 deletions.
diff --git a/examples/with-typescript/pages/users/[id].tsx b/examples/with-typescript/pages/users/[id].tsx
@@ -11,32 +11,33 @@ type Props = {
   errors?: string
 }
 
-export default class StaticPropsDetail extends React.Component<Props> {
-  render() {
-    const { item, errors } = this.props
-
-    if (errors) {
-      return (
-        <Layout title={`Error | Next.js + TypeScript Example`}>
-          <p>
-            <span style={{ color: 'red' }}>Error:</span> {errors}
-          </p>
-        </Layout>
-      )
-    }
-
+const StaticPropsDetail: React.FunctionComponent<Props> = ({
+  item,
+  errors,
+}) => {
+  if (errors) {
     return (
-      <Layout
-        title={`${
-          item ? item.name : 'User Detail'
-        } | Next.js + TypeScript Example`}
-      >
-        {item && <ListDetail item={item} />}
+      <Layout title="Error | Next.js + TypeScript Example">
+        <p>
+          <span style={{ color: 'red' }}>Error:</span> {errors}
+        </p>
       </Layout>
     )
   }
+
+  return (
+    <Layout
+      title={`${
+        item ? item.name : 'User Detail'
+      } | Next.js + TypeScript Example`}
+    >
+      {item && <ListDetail item={item} />}
+    </Layout>
+  )
 }
 
+export default StaticPropsDetail
+
 export const getStaticPaths: GetStaticPaths = async () => {
   // Get the paths we want to pre-render based on users
   const paths = sampleUserData.map(user => ({