[Examples] Removed React.FC/FunctionComponent from with-typescript (v…

…ercel#13798) Related to [this](facebook/create-react-app#8177). Let me know if you want me to change something.
rokinsky · Jul 11, 2020 · bd0f616 · bd0f616
1 parent bd579b0
commit bd0f616
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 11 deletions.
diff --git a/examples/with-typescript/components/Layout.tsx b/examples/with-typescript/components/Layout.tsx
@@ -1,15 +1,13 @@
-import * as React from 'react'
+import React, { ReactNode } from 'react'
 import Link from 'next/link'
 import Head from 'next/head'
 
 type Props = {
+  children?: ReactNode
   title?: string
 }
 
-const Layout: React.FunctionComponent<Props> = ({
-  children,
-  title = 'This is the default title',
-}) => (
+const Layout = ({ children, title = 'This is the default title' }: Props) => (
   <div>
     <Head>
       <title>{title}</title>

diff --git a/examples/with-typescript/components/List.tsx b/examples/with-typescript/components/List.tsx
@@ -6,7 +6,7 @@ type Props = {
   items: User[]
 }
 
-const List: React.FunctionComponent<Props> = ({ items }) => (
+const List = ({ items }: Props) => (
   <ul>
     {items.map((item) => (
       <li key={item.id}>

diff --git a/examples/with-typescript/components/ListDetail.tsx b/examples/with-typescript/components/ListDetail.tsx
@@ -6,9 +6,7 @@ type ListDetailProps = {
   item: User
 }
 
-const ListDetail: React.FunctionComponent<ListDetailProps> = ({
-  item: user,
-}) => (
+const ListDetail = ({ item: user }: ListDetailProps) => (
   <div>
     <h1>Detail for {user.name}</h1>
     <p>ID: {user.id}</p>

diff --git a/examples/with-typescript/components/ListItem.tsx b/examples/with-typescript/components/ListItem.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react'
+import React from 'react'
 import Link from 'next/link'
 
 import { User } from '../interfaces'
@@ -7,7 +7,7 @@ type Props = {
   data: User
 }
 
-const ListItem: React.FunctionComponent<Props> = ({ data }) => (
+const ListItem = ({ data }: Props) => (
   <Link href="/users/[id]" as={`/users/${data.id}`}>
     <a>
       {data.id}: {data.name}