C 02 Props

Author: kirandash

src/chapters/C01_Problem.tsx src/chapters/C01_Navigation_Problem.tsx

@@ -1,6 +1,6 @@
 // Chapter 01: Finding the correct types by navigating between type definitions
 
-const C01_Problem = () => {
+const C01_Navigation_Problem = () => {
   return (
     <div
       // type for aria-autocomplete ?
@@ -10,12 +10,12 @@ const C01_Problem = () => {
       // type for onClick ?
       onClick={}
     >
-      C01_Problem
+      C01_Navigation_Problem
     </div>
   )
 }
 
-export default C01_Problem
+export default C01_Navigation_Problem
 
 // 💡 Tips: How to Navigate between type files ?
 // Go to the type file and press F12 or Cmd + Click to navigate to the type file from the component file.

src/chapters/C01_Solution.tsx src/chapters/C01_Navigation_Solution.tsx

@@ -1,6 +1,6 @@
 // Chapter 01: Finding the correct types by navigating between type definitions
 
-const C01_Solution = () => {
+const C01_Navigation_Solution = () => {
   return (
     <div
       // type for aria-autocomplete ?
@@ -12,12 +12,12 @@ const C01_Solution = () => {
         console.log(e)
       }}
     >
-      C01_Solution
+      C01_Navigation_Solution
     </div>
   )
 }
 
-export default C01_Solution
+export default C01_Navigation_Solution
 
 // 💡 Tips: How to Navigate between type files ?
 // Go to the type file and press F12 or Cmd + Click to navigate to the type file from the component file.

src/chapters/C02_Props_Problem.tsx

@@ -0,0 +1,12 @@
+// Chapter 02: Add Proper Types to Props
+
+const Child = (props: Props) => {
+  const { color } = props
+  return <div>{color}</div>
+}
+
+const C02_Props_Problem = () => {
+  return <Child color="red" />
+}
+
+export default C02_Props_Problem

src/chapters/C02_Props_Solution.tsx

@@ -0,0 +1,16 @@
+// Chapter 02: Add Proper Types to Props
+
+type Props = {
+  color: string
+}
+
+const Child = (props: Props) => {
+  const { color } = props
+  return <div>{color}</div>
+}
+
+const C02_Props_Solution = () => {
+  return <Child color="red" />
+}
+
+export default C02_Props_Solution