fix: add instructions for exercice 03.compound-components (#133)

* fix: add instructions for exercice 03.compound-components

* Update exercises/03.compound-components/02.problem.validation/toggle.tsx

---------

Co-authored-by: Kent C. Dodds <[email protected]>

Author: flexbox

Diff for: exercises/03.compound-components/02.problem.validation/toggle.tsx

@@ -11,12 +11,19 @@ export function Toggle({ children }: { children: React.ReactNode }) {
 	return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
+// 🐨 create a custom useToggle() hook here
+// create a new context variable and read ToggleContext with use
+// when no context is found, throw an error with a useful message
+// otherwise return the context
+
 export function ToggleOn({ children }: { children: React.ReactNode }) {
+	// 🐨 instead reading context with use, we'll need to get that from useToggle()
 	const { on } = use(ToggleContext)!
 	return <>{on ? children : null}</>
 }
 
 export function ToggleOff({ children }: { children: React.ReactNode }) {
+	// 🐨 instead reading context with use, we'll need to get that from useToggle()
 	const { on } = use(ToggleContext)!
 	return <>{on ? null : children}</>
 }
@@ -25,6 +32,7 @@ type ToggleButtonProps = Omit<React.ComponentProps<typeof Switch>, 'on'> & {
 	on?: boolean
 }
 export function ToggleButton({ ...props }: ToggleButtonProps) {
+	// 🐨 instead reading context with use, we'll need to get that from useToggle()
 	const { on, toggle } = use(ToggleContext)!
 	return <Switch {...props} on={on} onClick={toggle} />
 }