Improved 72

Author: mattpocock

src/08-advanced-patterns/72-as-prop-with-forward-ref.problem.tsx

@@ -1,6 +1,7 @@
 import {
   ComponentPropsWithoutRef,
   ElementType,
+  ForwardedRef,
   forwardRef,
   useRef,
 } from "react";
@@ -13,13 +14,14 @@ import { Equal, Expect } from "../helpers/type-utils";
  * So, don't feel bad if you don't find it at all.
  */
 
-export const UnwrappedLink = <T extends ElementType>(
+export const UnwrappedLink = <TAs extends ElementType>(
   props: {
-    as?: T;
-  } & ComponentPropsWithoutRef<ElementType extends T ? "a" : T>,
+    as?: TAs;
+  } & ComponentPropsWithoutRef<ElementType extends TAs ? "a" : TAs>,
+  ref: ForwardedRef<any>,
 ) => {
   const { as: Comp = "a", ...rest } = props;
-  return <Comp {...rest}></Comp>;
+  return <Comp {...rest} ref={ref}></Comp>;
 };
 
 const Link = forwardRef(UnwrappedLink);

src/08-advanced-patterns/72-as-prop-with-forward-ref.solution.tsx

@@ -1,4 +1,10 @@
-import { ComponentProps, ElementType, forwardRef, useRef } from "react";
+import {
+  ComponentProps,
+  ElementType,
+  ForwardedRef,
+  forwardRef,
+  useRef,
+} from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 // Added fixedForwardRef from a previous exercise
@@ -19,9 +25,10 @@ function UnwrappedLink<T extends ElementType>(
   props: {
     as?: T;
   } & DistributiveOmit<ComponentProps<ElementType extends T ? "a" : T>, "as">,
+  ref: ForwardedRef<any>,
 ) {
   const { as: Comp = "a", ...rest } = props;
-  return <Comp {...rest}></Comp>;
+  return <Comp {...rest} ref={ref}></Comp>;
 }
 
 const Link = fixedForwardRef(UnwrappedLink);