From 4bdcf46640302bc600865dd80cc3bf5997a9af3e Mon Sep 17 00:00:00 2001
From: David Leuliette <dleuliette@gmail.com>
Date: Fri, 18 Oct 2024 04:35:29 +0200
Subject: [PATCH] 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 <me@kentcdodds.com>
---
 .../02.problem.validation/toggle.tsx                      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/exercises/03.compound-components/02.problem.validation/toggle.tsx b/exercises/03.compound-components/02.problem.validation/toggle.tsx
index 978a30ee..1b86f4d8 100644
--- a/exercises/03.compound-components/02.problem.validation/toggle.tsx
+++ b/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} />
 }