WIP

Author: mattpocock

src/02-components/08-using-html-props.problem.tsx

@@ -1,17 +1,7 @@
 import React from "react";
 
-export const Button = ({
-  onClick,
-  className,
-  children,
-  ...rest
-}: {
-  className: string;
-  children: React.ReactNode;
-}) => {
+export const Button = ({ className, ...rest }: {}) => {
   return (
-    <button {...rest} onClick={onClick} className={className}>
-      {children}
-    </button>
+    <button {...rest} className={`default-classname ${className}`}></button>
   );
 };

src/02-components/08-using-html-props.solution.1.tsx

@@ -1,17 +1,10 @@
-import React, { ComponentProps } from "react";
+import React, { ButtonHTMLAttributes } from "react";
 
 export const Button = ({
-  onClick,
   className,
-  children,
   ...rest
-}: {
-  className: string;
-  children: React.ReactNode;
-} & ComponentProps<"button">) => {
+}: ButtonHTMLAttributes<HTMLButtonElement>) => {
   return (
-    <button {...rest} onClick={onClick} className={className}>
-      {children}
-    </button>
+    <button {...rest} className={`default-classname ${className}`}></button>
   );
 };

src/02-components/08-using-html-props.solution.2.tsx

@@ -1,21 +1,7 @@
 import React, { ComponentProps } from "react";
 
-interface ButtonProps extends ComponentProps<"button"> {
-  className: string;
-  children: React.ReactNode;
-}
-
-export const Button = ({
-  children,
-  className,
-  onClick,
-  ...rest
-}: ButtonProps) => {
+export const Button = ({ className, ...rest }: ComponentProps<"button">) => {
   return (
-    <button {...rest} onClick={onClick} className={className}>
-      {children}
-    </button>
+    <button {...rest} className={`default-classname ${className}`}></button>
   );
 };
-
-type Props = ComponentProps<typeof Button>;

src/02-components/08-using-html-props.solution.3.tsx

@@ -0,0 +1 @@
+// name in Input