Fixed 66 example

Author: mattpocock

src/08-advanced-patterns/66-forward-ref-as-local-function.problem.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 /**
@@ -17,20 +17,36 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = fixedForwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };

src/08-advanced-patterns/66-forward-ref-as-local-function.solution.1.tsx

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from "react";
+import { ForwardedRef, forwardRef, useRef } from "react";
 import { Equal, Expect } from "../helpers/type-utils";
 
 function fixedForwardRef<T, P = {}>(
@@ -12,20 +12,36 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = fixedForwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };

src/08-advanced-patterns/66-forward-ref-as-local-function.solution.2.tsx

@@ -13,20 +13,36 @@ type Props<T> = {
   renderRow: (item: T) => React.ReactNode;
 };
 
-export const Table = <T,>(props: Props<T>, ref: ForwardedRef<any>) => {
-  return null;
+export const Table = <T,>(
+  props: Props<T>,
+  ref: ForwardedRef<HTMLTableElement>,
+) => {
+  return <table ref={ref} />;
 };
 
 const ForwardReffedTable = fixedForwardRef(Table);
 
 const Parent = () => {
+  const tableRef = useRef<HTMLTableElement>(null);
+  const wrongRef = useRef<HTMLDivElement>(null);
   return (
-    <ForwardReffedTable
-      data={["123"]}
-      renderRow={(row) => {
-        type test = Expect<Equal<typeof row, string>>;
-        return <div>123</div>;
-      }}
-    ></ForwardReffedTable>
+    <>
+      <ForwardReffedTable
+        ref={tableRef}
+        data={["123"]}
+        renderRow={(row) => {
+          type test = Expect<Equal<typeof row, string>>;
+          return <div>123</div>;
+        }}
+      />
+      <ForwardReffedTable
+        // @ts-expect-error
+        ref={wrongRef}
+        data={["123"]}
+        renderRow={(row) => {
+          return <div>123</div>;
+        }}
+      />
+    </>
   );
 };