Example of a "static" property with a React FC

Author: Aryan Jabbari

src/pages/examples/functional-components.mdx

@@ -14,31 +14,44 @@ import SEO from '../../components/Seo';
 
 # Functional Components
 
-Given that functional components are just functions that take in props as a parameter, we can do the following:
+Use the `React.FC` type and define the generic with your props type.
 
 ```typescript
 type HelloWorldProps = {
   userName: string;
 };
 
-const HelloWorld = ({ userName }: HelloWorldProps) => (
-  <div>Hello, {userName}!</div>
+const HelloWorld: React.FC<HelloWorldProps> = ({ children, userName }) => (
+  <div>
+    <p>Hello, {userName}</p>
+    {children}
+  </div>
 );
 ```
 
-However, this does not take the `children` prop into account. Use the `React.FC` type and define the generic as your props type.
+## Functional Components with "Static" Properties
+
+If you need to use a "static" property with your functional component (say, to define a router), you can do the following:
 
 ```typescript
+type Router = {
+  route: string;
+};
+const someFancyRouter: Router = { route: '/hello/world' };
+
 type HelloWorldProps = {
   userName: string;
 };
 
-const HelloWorld: React.FC<HelloWorldProps> = ({ children, userName }) => (
+type HelloWorldComponent = React.FC<HelloWorldProps> & { router: Router };
+
+const HelloWorld: HelloWorldComponent = ({ children, userName }) => (
   <div>
     <p>Hello, {userName}</p>
     {children}
   </div>
 );
+HelloWorld.router = someFancyRouter;
 ```
 
 [This video](https://www.youtube.com/watch?v=9lUN3sqAjQQ) explains another example of typing a functional component.