MOAR exercises

Author: mattpocock

notes/FUTURE.md

@@ -2,3 +2,5 @@
 
 Function overloads in custom hooks?
 function overloads in components?
+Omit, Pick, inferface extends with props
+Picking props from external libraries

src/05-advanced/44-as-prop.problem.tsx

@@ -0,0 +1,12 @@
+type AsProps = {
+  [K in keyof JSX.IntrinsicElements]: {
+    as: K;
+  } & JSX.IntrinsicElements[K];
+}[keyof JSX.IntrinsicElements];
+
+export const Component = (props: AsProps) => {
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const yeah = <Component as="a" href="awdawd"></Component>;

src/05-advanced/44-as-prop.solution.1.tsx

@@ -0,0 +1,20 @@
+type AsProps = {
+  [K in keyof JSX.IntrinsicElements]: {
+    as: K;
+  } & JSX.IntrinsicElements[K];
+}[keyof JSX.IntrinsicElements];
+
+export const Component = (props: AsProps) => {
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const example1 = <Component as="a" href="awdawd"></Component>;
+
+const example2 = (
+  <Component
+    as="div"
+    // Property 'href' does not exist
+    href="awdawd"
+  ></Component>
+);

src/05-advanced/44-as-prop.solution.2.tsx

@@ -0,0 +1,10 @@
+export const Component = <TAs extends keyof JSX.IntrinsicElements>(
+  props: {
+    as: TAs;
+  } & JSX.IntrinsicElements[TAs],
+) => {
+  const Comp = props.as as string;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const yeah = <Component as="input" value="awd"></Component>;

src/05-advanced/45-as-prop-with-custom-components.problem.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export const Component = (props: { as: any }) => {
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const Link = (props: { href: string; children?: React.ReactNode }) => {
+  return <a href={props.href}>{props.children}</a>;
+};
+
+const yeah = <Component as={Link} href="awdawd"></Component>;

src/05-advanced/45-as-prop-with-custom-components.solution.tsx

@@ -0,0 +1,20 @@
+import React, { ComponentProps, JSXElementConstructor } from "react";
+
+export const Component = <
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>,
+>(
+  props: {
+    as: T;
+  } & ComponentProps<T>,
+) => {
+  const Comp = props.as;
+  return <Comp {...(props as any)}></Comp>;
+};
+
+const Link = (props: { href: string; children?: React.ReactNode }) => {
+  return <a href={props.href}>{props.children}</a>;
+};
+
+// It works!
+
+<Component as={Link} href="awdawd"></Component>;