From 72dcd7649d1e00c75f2ad2f6f1e9cc132ce48825 Mon Sep 17 00:00:00 2001
From: "Kent C. Dodds" <me+github@kentcdodds.com>
Date: Thu, 15 Feb 2024 14:44:22 -0700
Subject: [PATCH] slots rock

---
 .../01.problem/toggle.tsx                     |  4 +-
 .../01.solution/toggle.tsx                    |  6 +-
 .../02.problem.validation/app.tsx             |  2 +-
 .../02.problem.validation/toggle.tsx          |  6 +-
 .../02.solution.validation/toggle.tsx         |  6 +-
 .../04.slots/01.problem.context/README.mdx    |  1 +
 .../app.tsx                                   |  2 +
 .../index.css                                 |  0
 .../index.tsx                                 |  0
 .../04.slots/01.problem.context/slots.tsx     | 18 ++++++
 .../text-field.tsx                            |  4 ++
 .../toggle.tsx                                |  6 +-
 exercises/04.slots/01.problem/slots.tsx       |  7 ---
 .../04.slots/01.solution.context/README.mdx   |  1 +
 .../app.tsx                                   |  0
 .../index.css                                 |  0
 .../index.tsx                                 |  0
 .../slots.tsx                                 | 15 +----
 .../text-field.tsx                            |  6 +-
 .../toggle.tsx                                |  6 +-
 .../04.slots/02.problem.generic/README.mdx    |  1 +
 .../app.tsx                                   |  3 +
 .../index.css                                 |  0
 .../index.tsx                                 |  0
 .../slots.tsx                                 | 15 +----
 .../text-field.tsx                            |  6 +-
 .../toggle.tsx                                | 16 ++++-
 exercises/04.slots/02.problem/README.mdx      |  1 -
 .../04.slots/02.solution.generic/README.mdx   |  1 +
 .../app.tsx                                   |  0
 .../index.css                                 |  0
 .../index.tsx                                 |  0
 .../04.slots/02.solution.generic/slots.tsx    | 23 +++++++
 .../text-field.tsx                            |  6 +-
 .../toggle.tsx                                | 11 ++--
 exercises/04.slots/02.solution/README.mdx     |  1 -
 exercises/04.slots/02.solution/slots.tsx      | 44 -------------
 .../README.mdx                                |  0
 .../{03.problem => 03.problem.prop}/app.tsx   |  2 +
 .../{03.problem => 03.problem.prop}/index.css |  0
 .../{03.problem => 03.problem.prop}/index.tsx |  0
 exercises/04.slots/03.problem.prop/slots.tsx  | 51 +++++++++++++++
 .../text-field.tsx                            |  6 +-
 .../toggle.tsx                                | 20 ++++--
 exercises/04.slots/03.problem/README.mdx      |  1 -
 exercises/04.slots/03.problem/slots.tsx       | 62 -------------------
 .../README.mdx                                |  0
 .../{03.solution => 03.solution.prop}/app.tsx |  0
 .../index.css                                 |  0
 .../index.tsx                                 |  0
 .../slots.tsx                                 | 25 +++-----
 .../04.slots/03.solution.prop/text-field.tsx  | 22 +++++++
 .../toggle.tsx                                |  8 +--
 exercises/04.slots/03.solution/README.mdx     |  1 -
 exercises/04.slots/03.solution/text-field.tsx | 22 -------
 .../06.state-reducer/01.problem/toggle.tsx    |  2 +-
 .../06.state-reducer/01.solution/toggle.tsx   |  2 +-
 .../02.problem.default/toggle.tsx             |  2 +-
 .../02.solution.default/toggle.tsx            |  2 +-
 shared/switch.tsx                             |  2 +-
 60 files changed, 215 insertions(+), 233 deletions(-)
 create mode 100644 exercises/04.slots/01.problem.context/README.mdx
 rename exercises/04.slots/{01.solution => 01.problem.context}/app.tsx (79%)
 rename exercises/04.slots/{01.problem => 01.problem.context}/index.css (100%)
 rename exercises/04.slots/{01.problem => 01.problem.context}/index.tsx (100%)
 create mode 100644 exercises/04.slots/01.problem.context/slots.tsx
 rename exercises/04.slots/{01.problem => 01.problem.context}/text-field.tsx (54%)
 rename exercises/04.slots/{02.problem => 01.problem.context}/toggle.tsx (84%)
 delete mode 100644 exercises/04.slots/01.problem/slots.tsx
 create mode 100644 exercises/04.slots/01.solution.context/README.mdx
 rename exercises/04.slots/{01.problem => 01.solution.context}/app.tsx (100%)
 rename exercises/04.slots/{01.solution => 01.solution.context}/index.css (100%)
 rename exercises/04.slots/{01.solution => 01.solution.context}/index.tsx (100%)
 rename exercises/04.slots/{02.problem => 01.solution.context}/slots.tsx (61%)
 rename exercises/04.slots/{01.solution => 01.solution.context}/text-field.tsx (66%)
 rename exercises/04.slots/{01.solution => 01.solution.context}/toggle.tsx (84%)
 create mode 100644 exercises/04.slots/02.problem.generic/README.mdx
 rename exercises/04.slots/{02.problem => 02.problem.generic}/app.tsx (80%)
 rename exercises/04.slots/{02.problem => 02.problem.generic}/index.css (100%)
 rename exercises/04.slots/{02.problem => 02.problem.generic}/index.tsx (100%)
 rename exercises/04.slots/{01.solution => 02.problem.generic}/slots.tsx (61%)
 rename exercises/04.slots/{03.problem => 02.problem.generic}/text-field.tsx (66%)
 rename exercises/04.slots/{01.problem => 02.problem.generic}/toggle.tsx (61%)
 delete mode 100644 exercises/04.slots/02.problem/README.mdx
 create mode 100644 exercises/04.slots/02.solution.generic/README.mdx
 rename exercises/04.slots/{02.solution => 02.solution.generic}/app.tsx (100%)
 rename exercises/04.slots/{02.solution => 02.solution.generic}/index.css (100%)
 rename exercises/04.slots/{02.solution => 02.solution.generic}/index.tsx (100%)
 create mode 100644 exercises/04.slots/02.solution.generic/slots.tsx
 rename exercises/04.slots/{02.problem => 02.solution.generic}/text-field.tsx (66%)
 rename exercises/04.slots/{03.problem => 02.solution.generic}/toggle.tsx (88%)
 delete mode 100644 exercises/04.slots/02.solution/README.mdx
 delete mode 100644 exercises/04.slots/02.solution/slots.tsx
 rename exercises/04.slots/{01.problem => 03.problem.prop}/README.mdx (100%)
 rename exercises/04.slots/{03.problem => 03.problem.prop}/app.tsx (77%)
 rename exercises/04.slots/{03.problem => 03.problem.prop}/index.css (100%)
 rename exercises/04.slots/{03.problem => 03.problem.prop}/index.tsx (100%)
 create mode 100644 exercises/04.slots/03.problem.prop/slots.tsx
 rename exercises/04.slots/{02.solution => 03.problem.prop}/text-field.tsx (66%)
 rename exercises/04.slots/{02.solution => 03.problem.prop}/toggle.tsx (75%)
 delete mode 100644 exercises/04.slots/03.problem/README.mdx
 delete mode 100644 exercises/04.slots/03.problem/slots.tsx
 rename exercises/04.slots/{01.solution => 03.solution.prop}/README.mdx (100%)
 rename exercises/04.slots/{03.solution => 03.solution.prop}/app.tsx (100%)
 rename exercises/04.slots/{03.solution => 03.solution.prop}/index.css (100%)
 rename exercises/04.slots/{03.solution => 03.solution.prop}/index.tsx (100%)
 rename exercises/04.slots/{03.solution => 03.solution.prop}/slots.tsx (70%)
 create mode 100644 exercises/04.slots/03.solution.prop/text-field.tsx
 rename exercises/04.slots/{03.solution => 03.solution.prop}/toggle.tsx (85%)
 delete mode 100644 exercises/04.slots/03.solution/README.mdx
 delete mode 100644 exercises/04.slots/03.solution/text-field.tsx

diff --git a/exercises/03.compound-components/01.problem/toggle.tsx b/exercises/03.compound-components/01.problem/toggle.tsx
index c9b50a4f..3ce5a32a 100644
--- a/exercises/03.compound-components/01.problem/toggle.tsx
+++ b/exercises/03.compound-components/01.problem/toggle.tsx
@@ -31,9 +31,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 	return <>{on ? null : children}</>
 }
 
-export function ToggleButton(
-	props: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>,
-) {
+export function ToggleButton(props: React.ComponentProps<typeof Switch>) {
 	// 🐨 get `on` and `toggle` from the ToggleContext with `use`
 	const on = false
 	const toggle = () => {}
diff --git a/exercises/03.compound-components/01.solution/toggle.tsx b/exercises/03.compound-components/01.solution/toggle.tsx
index 95189164..c0cd9f87 100644
--- a/exercises/03.compound-components/01.solution/toggle.tsx
+++ b/exercises/03.compound-components/01.solution/toggle.tsx
@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -28,7 +28,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle } = use(ToggleContext)!
 	return <Switch {...props} on={on} onClick={toggle} />
 }
diff --git a/exercises/03.compound-components/02.problem.validation/app.tsx b/exercises/03.compound-components/02.problem.validation/app.tsx
index 0544e966..34deeebe 100644
--- a/exercises/03.compound-components/02.problem.validation/app.tsx
+++ b/exercises/03.compound-components/02.problem.validation/app.tsx
@@ -1,4 +1,4 @@
-import { Toggle, ToggleOn, ToggleOff, ToggleButton } from './toggle.tsx'
+import { Toggle, ToggleButton, ToggleOff, ToggleOn } from './toggle.tsx'
 
 export function App() {
 	return (
diff --git a/exercises/03.compound-components/02.problem.validation/toggle.tsx b/exercises/03.compound-components/02.problem.validation/toggle.tsx
index 95189164..c0cd9f87 100644
--- a/exercises/03.compound-components/02.problem.validation/toggle.tsx
+++ b/exercises/03.compound-components/02.problem.validation/toggle.tsx
@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -28,7 +28,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle } = use(ToggleContext)!
 	return <Switch {...props} on={on} onClick={toggle} />
 }
diff --git a/exercises/03.compound-components/02.solution.validation/toggle.tsx b/exercises/03.compound-components/02.solution.validation/toggle.tsx
index e4920d3c..2d337769 100644
--- a/exercises/03.compound-components/02.solution.validation/toggle.tsx
+++ b/exercises/03.compound-components/02.solution.validation/toggle.tsx
@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -38,7 +38,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle } = useToggle()
 	return <Switch {...props} on={on} onClick={toggle} />
 }
diff --git a/exercises/04.slots/01.problem.context/README.mdx b/exercises/04.slots/01.problem.context/README.mdx
new file mode 100644
index 00000000..892c37f1
--- /dev/null
+++ b/exercises/04.slots/01.problem.context/README.mdx
@@ -0,0 +1 @@
+# Slot Context
diff --git a/exercises/04.slots/01.solution/app.tsx b/exercises/04.slots/01.problem.context/app.tsx
similarity index 79%
rename from exercises/04.slots/01.solution/app.tsx
rename to exercises/04.slots/01.problem.context/app.tsx
index a7f61ea8..ca6334d4 100644
--- a/exercises/04.slots/01.solution/app.tsx
+++ b/exercises/04.slots/01.problem.context/app.tsx
@@ -17,7 +17,9 @@ export function App() {
 			</div>
 			<hr />
 			<div>
+				{/* 🦉 feel free to test the id customization by passing an id here */}
 				<TextField>
+					{/* 🦉 feel free to test the prop merging by passing props here */}
 					<Label>Venue</Label>
 					<Input />
 				</TextField>
diff --git a/exercises/04.slots/01.problem/index.css b/exercises/04.slots/01.problem.context/index.css
similarity index 100%
rename from exercises/04.slots/01.problem/index.css
rename to exercises/04.slots/01.problem.context/index.css
diff --git a/exercises/04.slots/01.problem/index.tsx b/exercises/04.slots/01.problem.context/index.tsx
similarity index 100%
rename from exercises/04.slots/01.problem/index.tsx
rename to exercises/04.slots/01.problem.context/index.tsx
diff --git a/exercises/04.slots/01.problem.context/slots.tsx b/exercises/04.slots/01.problem.context/slots.tsx
new file mode 100644
index 00000000..20ea7c3c
--- /dev/null
+++ b/exercises/04.slots/01.problem.context/slots.tsx
@@ -0,0 +1,18 @@
+// 🦺 create a Slots type that's just an object of objects
+// 🐨 create and export a SlotContext with that type and default it to an empty object
+
+// 🐨 create a useSlotProps hook which:
+// 1. accepts props (any type) and slot (string)
+// 2. gets the slots from the SlotContext
+// 3. gets the props from the slot by its name
+// 4. returns the merged props with the slot and given props
+
+export function Label(props: React.ComponentProps<'label'>) {
+	// 🐨 get the props from useSlotProps for a slot called "label" and apply those to the label
+	return <label {...props} />
+}
+
+export function Input(props: React.ComponentProps<'input'>) {
+	// 🐨 get the props from useSlotProps for a slot called "label" and apply those to the input
+	return <input {...props} />
+}
diff --git a/exercises/04.slots/01.problem/text-field.tsx b/exercises/04.slots/01.problem.context/text-field.tsx
similarity index 54%
rename from exercises/04.slots/01.problem/text-field.tsx
rename to exercises/04.slots/01.problem.context/text-field.tsx
index 73721037..aaa37af3 100644
--- a/exercises/04.slots/01.problem/text-field.tsx
+++ b/exercises/04.slots/01.problem.context/text-field.tsx
@@ -10,8 +10,12 @@ export function TextField({
 	const generatedId = useId()
 	id = id ?? generatedId
 
+	// 🐨 use these for the slot you render
 	// const labelProps = { htmlFor: id }
 	// const inputProps = { id }
 
+	// 🐨 wrap this in a SlotContext.Provider with the value set to an object
+	// that has a label and input property with the values of labelProps and
+	// inputProps respectively.
 	return children
 }
diff --git a/exercises/04.slots/02.problem/toggle.tsx b/exercises/04.slots/01.problem.context/toggle.tsx
similarity index 84%
rename from exercises/04.slots/02.problem/toggle.tsx
rename to exercises/04.slots/01.problem.context/toggle.tsx
index e4920d3c..2d337769 100644
--- a/exercises/04.slots/02.problem/toggle.tsx
+++ b/exercises/04.slots/01.problem.context/toggle.tsx
@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -38,7 +38,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle } = useToggle()
 	return <Switch {...props} on={on} onClick={toggle} />
 }
diff --git a/exercises/04.slots/01.problem/slots.tsx b/exercises/04.slots/01.problem/slots.tsx
deleted file mode 100644
index 6fdd9e52..00000000
--- a/exercises/04.slots/01.problem/slots.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export function Label(props: React.ComponentProps<'label'>) {
-	return <label {...props} />
-}
-
-export function Input(props: React.ComponentProps<'input'>) {
-	return <input {...props} />
-}
diff --git a/exercises/04.slots/01.solution.context/README.mdx b/exercises/04.slots/01.solution.context/README.mdx
new file mode 100644
index 00000000..892c37f1
--- /dev/null
+++ b/exercises/04.slots/01.solution.context/README.mdx
@@ -0,0 +1 @@
+# Slot Context
diff --git a/exercises/04.slots/01.problem/app.tsx b/exercises/04.slots/01.solution.context/app.tsx
similarity index 100%
rename from exercises/04.slots/01.problem/app.tsx
rename to exercises/04.slots/01.solution.context/app.tsx
diff --git a/exercises/04.slots/01.solution/index.css b/exercises/04.slots/01.solution.context/index.css
similarity index 100%
rename from exercises/04.slots/01.solution/index.css
rename to exercises/04.slots/01.solution.context/index.css
diff --git a/exercises/04.slots/01.solution/index.tsx b/exercises/04.slots/01.solution.context/index.tsx
similarity index 100%
rename from exercises/04.slots/01.solution/index.tsx
rename to exercises/04.slots/01.solution.context/index.tsx
diff --git a/exercises/04.slots/02.problem/slots.tsx b/exercises/04.slots/01.solution.context/slots.tsx
similarity index 61%
rename from exercises/04.slots/02.problem/slots.tsx
rename to exercises/04.slots/01.solution.context/slots.tsx
index 233f6ed1..d3870a64 100644
--- a/exercises/04.slots/02.problem/slots.tsx
+++ b/exercises/04.slots/01.solution.context/slots.tsx
@@ -1,19 +1,10 @@
 import { createContext, use } from 'react'
 
 type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
-	slots,
-	children,
-}: {
-	slots: Slots
-	children: React.ReactNode
-}) {
-	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
+export const SlotContext = createContext<Slots>({})
 
-export function useSlotProps<Props>(props: Props, slot: string): Props {
-	const slots = use(SlotContext) ?? ({} as Slots)
+function useSlotProps<Props>(props: Props, slot: string): Props {
+	const slots = use(SlotContext)
 
 	// a more proper "mergeProps" function is in order here
 	// to handle things like merging event handlers better.
diff --git a/exercises/04.slots/01.solution/text-field.tsx b/exercises/04.slots/01.solution.context/text-field.tsx
similarity index 66%
rename from exercises/04.slots/01.solution/text-field.tsx
rename to exercises/04.slots/01.solution.context/text-field.tsx
index 479f548b..c3107e2f 100644
--- a/exercises/04.slots/01.solution/text-field.tsx
+++ b/exercises/04.slots/01.solution.context/text-field.tsx
@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
 	id,
@@ -15,8 +15,8 @@ export function TextField({
 	const inputProps = { id }
 
 	return (
-		<SlotProvider slots={{ label: labelProps, input: inputProps }}>
+		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
 			{children}
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
diff --git a/exercises/04.slots/01.solution/toggle.tsx b/exercises/04.slots/01.solution.context/toggle.tsx
similarity index 84%
rename from exercises/04.slots/01.solution/toggle.tsx
rename to exercises/04.slots/01.solution.context/toggle.tsx
index e4920d3c..2d337769 100644
--- a/exercises/04.slots/01.solution/toggle.tsx
+++ b/exercises/04.slots/01.solution.context/toggle.tsx
@@ -1,8 +1,8 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
 export function Toggle({ children }: { children: React.ReactNode }) {
@@ -38,7 +38,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle } = useToggle()
 	return <Switch {...props} on={on} onClick={toggle} />
 }
diff --git a/exercises/04.slots/02.problem.generic/README.mdx b/exercises/04.slots/02.problem.generic/README.mdx
new file mode 100644
index 00000000..9eab6155
--- /dev/null
+++ b/exercises/04.slots/02.problem.generic/README.mdx
@@ -0,0 +1 @@
+# Generic Slot Components
diff --git a/exercises/04.slots/02.problem/app.tsx b/exercises/04.slots/02.problem.generic/app.tsx
similarity index 80%
rename from exercises/04.slots/02.problem/app.tsx
rename to exercises/04.slots/02.problem.generic/app.tsx
index a7f61ea8..db0035c0 100644
--- a/exercises/04.slots/02.problem/app.tsx
+++ b/exercises/04.slots/02.problem.generic/app.tsx
@@ -4,12 +4,15 @@ import { TextField } from './text-field.tsx'
 import { Toggle, ToggleButton, ToggleOff, ToggleOn } from './toggle.tsx'
 
 export function App() {
+	// 💣 delete this variable
 	const partyModeId = useId()
 	return (
 		<div>
 			<div>
 				<Toggle>
+					{/* 🐨 switch this label for the Label component from ./slots.tsx */}
 					<label htmlFor={partyModeId}>Party mode</label>
+					{/* 🐨 remove this id prop */}
 					<ToggleButton id={partyModeId} />
 					<ToggleOn>Let's party 🥳</ToggleOn>
 					<ToggleOff>Sad town 😭</ToggleOff>
diff --git a/exercises/04.slots/02.problem/index.css b/exercises/04.slots/02.problem.generic/index.css
similarity index 100%
rename from exercises/04.slots/02.problem/index.css
rename to exercises/04.slots/02.problem.generic/index.css
diff --git a/exercises/04.slots/02.problem/index.tsx b/exercises/04.slots/02.problem.generic/index.tsx
similarity index 100%
rename from exercises/04.slots/02.problem/index.tsx
rename to exercises/04.slots/02.problem.generic/index.tsx
diff --git a/exercises/04.slots/01.solution/slots.tsx b/exercises/04.slots/02.problem.generic/slots.tsx
similarity index 61%
rename from exercises/04.slots/01.solution/slots.tsx
rename to exercises/04.slots/02.problem.generic/slots.tsx
index 233f6ed1..d3870a64 100644
--- a/exercises/04.slots/01.solution/slots.tsx
+++ b/exercises/04.slots/02.problem.generic/slots.tsx
@@ -1,19 +1,10 @@
 import { createContext, use } from 'react'
 
 type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
-	slots,
-	children,
-}: {
-	slots: Slots
-	children: React.ReactNode
-}) {
-	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
+export const SlotContext = createContext<Slots>({})
 
-export function useSlotProps<Props>(props: Props, slot: string): Props {
-	const slots = use(SlotContext) ?? ({} as Slots)
+function useSlotProps<Props>(props: Props, slot: string): Props {
+	const slots = use(SlotContext)
 
 	// a more proper "mergeProps" function is in order here
 	// to handle things like merging event handlers better.
diff --git a/exercises/04.slots/03.problem/text-field.tsx b/exercises/04.slots/02.problem.generic/text-field.tsx
similarity index 66%
rename from exercises/04.slots/03.problem/text-field.tsx
rename to exercises/04.slots/02.problem.generic/text-field.tsx
index 479f548b..c3107e2f 100644
--- a/exercises/04.slots/03.problem/text-field.tsx
+++ b/exercises/04.slots/02.problem.generic/text-field.tsx
@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
 	id,
@@ -15,8 +15,8 @@ export function TextField({
 	const inputProps = { id }
 
 	return (
-		<SlotProvider slots={{ label: labelProps, input: inputProps }}>
+		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
 			{children}
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
diff --git a/exercises/04.slots/01.problem/toggle.tsx b/exercises/04.slots/02.problem.generic/toggle.tsx
similarity index 61%
rename from exercises/04.slots/01.problem/toggle.tsx
rename to exercises/04.slots/02.problem.generic/toggle.tsx
index e4920d3c..cde8c84b 100644
--- a/exercises/04.slots/01.problem/toggle.tsx
+++ b/exercises/04.slots/02.problem.generic/toggle.tsx
@@ -1,14 +1,22 @@
-import { use, useState } from 'react'
+import { createContext, use, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
 
+// 🐨 add an id string to the ToggleValue type
 type ToggleValue = { on: boolean; toggle: () => void }
-const ToggleContext = React.createContext<ToggleValue | undefined>(undefined)
+const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
 
+// 🐨 update this to accept an optional id
 export function Toggle({ children }: { children: React.ReactNode }) {
 	const [on, setOn] = useState(false)
+	// 🐨 generate an id using useId (💰 similar to in text-field.tsx)
+
 	const toggle = () => setOn(!on)
 
+	// 🐨 create labelProps that sets htmlFor to the id
+
+	// 🐨 wrap this in SlotContext.Provider and pass the labelProps in the label slot
+	// 🐨 add the id to the value in the ToggleContext.Provider
 	return (
 		<ToggleContext.Provider value={{ on, toggle }}>
 			{children}
@@ -38,7 +46,9 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
+	// 🐨 get the id out of useToggle
 	const { on, toggle } = useToggle()
+	// 🐨 pass the id for the ToggleButton here
 	return <Switch {...props} on={on} onClick={toggle} />
 }
diff --git a/exercises/04.slots/02.problem/README.mdx b/exercises/04.slots/02.problem/README.mdx
deleted file mode 100644
index 0b5e2dc8..00000000
--- a/exercises/04.slots/02.problem/README.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Slot Prop
diff --git a/exercises/04.slots/02.solution.generic/README.mdx b/exercises/04.slots/02.solution.generic/README.mdx
new file mode 100644
index 00000000..9eab6155
--- /dev/null
+++ b/exercises/04.slots/02.solution.generic/README.mdx
@@ -0,0 +1 @@
+# Generic Slot Components
diff --git a/exercises/04.slots/02.solution/app.tsx b/exercises/04.slots/02.solution.generic/app.tsx
similarity index 100%
rename from exercises/04.slots/02.solution/app.tsx
rename to exercises/04.slots/02.solution.generic/app.tsx
diff --git a/exercises/04.slots/02.solution/index.css b/exercises/04.slots/02.solution.generic/index.css
similarity index 100%
rename from exercises/04.slots/02.solution/index.css
rename to exercises/04.slots/02.solution.generic/index.css
diff --git a/exercises/04.slots/02.solution/index.tsx b/exercises/04.slots/02.solution.generic/index.tsx
similarity index 100%
rename from exercises/04.slots/02.solution/index.tsx
rename to exercises/04.slots/02.solution.generic/index.tsx
diff --git a/exercises/04.slots/02.solution.generic/slots.tsx b/exercises/04.slots/02.solution.generic/slots.tsx
new file mode 100644
index 00000000..d3870a64
--- /dev/null
+++ b/exercises/04.slots/02.solution.generic/slots.tsx
@@ -0,0 +1,23 @@
+import { createContext, use } from 'react'
+
+type Slots = Record<string, Record<string, unknown>>
+export const SlotContext = createContext<Slots>({})
+
+function useSlotProps<Props>(props: Props, slot: string): Props {
+	const slots = use(SlotContext)
+
+	// a more proper "mergeProps" function is in order here
+	// to handle things like merging event handlers better.
+	// we'll get to that a bit in a later exercise.
+	return { ...slots[slot], slot, ...props } as Props
+}
+
+export function Label(props: React.ComponentProps<'label'>) {
+	props = useSlotProps(props, 'label')
+	return <label {...props} />
+}
+
+export function Input(props: React.ComponentProps<'input'>) {
+	props = useSlotProps(props, 'input')
+	return <input {...props} />
+}
diff --git a/exercises/04.slots/02.problem/text-field.tsx b/exercises/04.slots/02.solution.generic/text-field.tsx
similarity index 66%
rename from exercises/04.slots/02.problem/text-field.tsx
rename to exercises/04.slots/02.solution.generic/text-field.tsx
index 479f548b..c3107e2f 100644
--- a/exercises/04.slots/02.problem/text-field.tsx
+++ b/exercises/04.slots/02.solution.generic/text-field.tsx
@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
 	id,
@@ -15,8 +15,8 @@ export function TextField({
 	const inputProps = { id }
 
 	return (
-		<SlotProvider slots={{ label: labelProps, input: inputProps }}>
+		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
 			{children}
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
diff --git a/exercises/04.slots/03.problem/toggle.tsx b/exercises/04.slots/02.solution.generic/toggle.tsx
similarity index 88%
rename from exercises/04.slots/03.problem/toggle.tsx
rename to exercises/04.slots/02.solution.generic/toggle.tsx
index 3ececd31..90dc46b0 100644
--- a/exercises/04.slots/03.problem/toggle.tsx
+++ b/exercises/04.slots/02.solution.generic/toggle.tsx
@@ -1,6 +1,6 @@
 import { createContext, use, useId, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 type ToggleValue = { on: boolean; toggle: () => void; id: string }
 const ToggleContext = createContext<ToggleValue | undefined>(undefined)
@@ -14,18 +14,19 @@ export function Toggle({
 	children: React.ReactNode
 }) {
 	const [on, setOn] = useState(false)
-	const toggle = () => setOn(!on)
 	const generatedId = useId()
 	id = id ?? generatedId
 
+	const toggle = () => setOn(!on)
+
 	const labelProps = { htmlFor: id }
 
 	return (
-		<SlotProvider slots={{ label: labelProps }}>
+		<SlotContext.Provider value={{ label: labelProps }}>
 			<ToggleContext.Provider value={{ on, toggle, id }}>
 				{children}
 			</ToggleContext.Provider>
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
 
@@ -51,7 +52,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle, id } = useToggle()
 	return <Switch {...props} id={id} on={on} onClick={toggle} />
 }
diff --git a/exercises/04.slots/02.solution/README.mdx b/exercises/04.slots/02.solution/README.mdx
deleted file mode 100644
index 0b5e2dc8..00000000
--- a/exercises/04.slots/02.solution/README.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Slot Prop
diff --git a/exercises/04.slots/02.solution/slots.tsx b/exercises/04.slots/02.solution/slots.tsx
deleted file mode 100644
index 39d4eb6c..00000000
--- a/exercises/04.slots/02.solution/slots.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { createContext, use } from 'react'
-import { Switch as BaseSwitch } from '#shared/switch'
-
-type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
-	slots,
-	children,
-}: {
-	slots: Slots
-	children: React.ReactNode
-}) {
-	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
-
-export function useSlotProps<Props>(props: Props, slot: string): Props {
-	const slots = use(SlotContext) ?? ({} as Slots)
-
-	// a more proper "mergeProps" function is in order here
-	// to handle things like merging event handlers better.
-	// we'll get to that a bit in a later exercise.
-	return { ...slots[slot], slot, ...props } as Props
-}
-
-export function Label(props: React.ComponentProps<'label'>) {
-	props = useSlotProps(props, 'label')
-	return <label {...props} />
-}
-
-export function Input(props: React.ComponentProps<'input'>) {
-	props = useSlotProps(props, 'input')
-	return <input {...props} />
-}
-
-export function Switch({
-	...props
-}: Omit<React.ComponentProps<typeof BaseSwitch>, 'on' | 'onClick'> & {
-	slot?: string
-}) {
-	const switchProps = useSlotProps(props, 'switch') as React.ComponentProps<
-		typeof BaseSwitch
-	>
-	return <BaseSwitch {...switchProps} />
-}
diff --git a/exercises/04.slots/01.problem/README.mdx b/exercises/04.slots/03.problem.prop/README.mdx
similarity index 100%
rename from exercises/04.slots/01.problem/README.mdx
rename to exercises/04.slots/03.problem.prop/README.mdx
diff --git a/exercises/04.slots/03.problem/app.tsx b/exercises/04.slots/03.problem.prop/app.tsx
similarity index 77%
rename from exercises/04.slots/03.problem/app.tsx
rename to exercises/04.slots/03.problem.prop/app.tsx
index a356c4ed..ef23db88 100644
--- a/exercises/04.slots/03.problem/app.tsx
+++ b/exercises/04.slots/03.problem.prop/app.tsx
@@ -8,7 +8,9 @@ export function App() {
 			<div>
 				<Toggle>
 					<Label>Party mode</Label>
+					{/* 🐨 switch this for the Switch slot component */}
 					<ToggleButton />
+					{/* 🐨 change these to the Text slot component with appropriate slot props */}
 					<ToggleOn>Let's party 🥳</ToggleOn>
 					<ToggleOff>Sad town 😭</ToggleOff>
 				</Toggle>
diff --git a/exercises/04.slots/03.problem/index.css b/exercises/04.slots/03.problem.prop/index.css
similarity index 100%
rename from exercises/04.slots/03.problem/index.css
rename to exercises/04.slots/03.problem.prop/index.css
diff --git a/exercises/04.slots/03.problem/index.tsx b/exercises/04.slots/03.problem.prop/index.tsx
similarity index 100%
rename from exercises/04.slots/03.problem/index.tsx
rename to exercises/04.slots/03.problem.prop/index.tsx
diff --git a/exercises/04.slots/03.problem.prop/slots.tsx b/exercises/04.slots/03.problem.prop/slots.tsx
new file mode 100644
index 00000000..24bf627c
--- /dev/null
+++ b/exercises/04.slots/03.problem.prop/slots.tsx
@@ -0,0 +1,51 @@
+import { createContext, use } from 'react'
+import { Switch as BaseSwitch } from '#shared/switch'
+
+type Slots = Record<string, Record<string, unknown>>
+export const SlotContext = createContext<Slots>({})
+
+function useSlotProps<Props>(
+	props: Props, // 🐨 this should now be Props & { slot?: string }
+	slot: string, // 🐨 rename this to "defaultSlot" and make it optional
+): Props {
+	// 🐨 create a slot variable that is set to props.slot and falls back to the defaultSlot
+	// 🐨 if there's no slot, return the props as they are
+
+	const slots = use(SlotContext)
+
+	// a more proper "mergeProps" function is in order here
+	// to handle things like merging event handlers better.
+	// we'll get to that a bit in a later exercise.
+	return { ...slots[slot], slot, ...props } as Props
+}
+
+// 🐨 add an optional slot to the props type here
+export function Label(props: React.ComponentProps<'label'>) {
+	props = useSlotProps(props, 'label')
+	return <label {...props} />
+}
+
+// 🐨 add an optional slot to the props type here
+export function Input(props: React.ComponentProps<'input'>) {
+	props = useSlotProps(props, 'input')
+	return <input {...props} />
+}
+
+// 🐨 add an optional slot to the props type here
+export function Text(props: React.ComponentProps<'span'>) {
+	props = useSlotProps(props, 'text')
+	return <span {...props} />
+}
+
+// 🐨 add an optional slot to the props type here
+export function Switch(
+	props: Omit<React.ComponentProps<typeof BaseSwitch>, 'on'>,
+) {
+	return (
+		<BaseSwitch
+			{...(useSlotProps(props, 'switch') as React.ComponentProps<
+				typeof BaseSwitch
+			>)}
+		/>
+	)
+}
diff --git a/exercises/04.slots/02.solution/text-field.tsx b/exercises/04.slots/03.problem.prop/text-field.tsx
similarity index 66%
rename from exercises/04.slots/02.solution/text-field.tsx
rename to exercises/04.slots/03.problem.prop/text-field.tsx
index 479f548b..c3107e2f 100644
--- a/exercises/04.slots/02.solution/text-field.tsx
+++ b/exercises/04.slots/03.problem.prop/text-field.tsx
@@ -1,5 +1,5 @@
 import { useId } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function TextField({
 	id,
@@ -15,8 +15,8 @@ export function TextField({
 	const inputProps = { id }
 
 	return (
-		<SlotProvider slots={{ label: labelProps, input: inputProps }}>
+		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
 			{children}
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
diff --git a/exercises/04.slots/02.solution/toggle.tsx b/exercises/04.slots/03.problem.prop/toggle.tsx
similarity index 75%
rename from exercises/04.slots/02.solution/toggle.tsx
rename to exercises/04.slots/03.problem.prop/toggle.tsx
index 3ececd31..b94de636 100644
--- a/exercises/04.slots/02.solution/toggle.tsx
+++ b/exercises/04.slots/03.problem.prop/toggle.tsx
@@ -1,7 +1,8 @@
 import { createContext, use, useId, useState } from 'react'
 import { Switch } from '#shared/switch.tsx'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
+// 🐨 delete all this context stuff
 type ToggleValue = { on: boolean; toggle: () => void; id: string }
 const ToggleContext = createContext<ToggleValue | undefined>(undefined)
 ToggleContext.displayName = 'ToggleContext'
@@ -14,21 +15,30 @@ export function Toggle({
 	children: React.ReactNode
 }) {
 	const [on, setOn] = useState(false)
-	const toggle = () => setOn(!on)
 	const generatedId = useId()
 	id = id ?? generatedId
 
+	const toggle = () => setOn(!on)
+
 	const labelProps = { htmlFor: id }
+	// 🐨 add props objects for onText, offText, and switch
 
 	return (
-		<SlotProvider slots={{ label: labelProps }}>
+		<SlotContext.Provider
+			value={{
+				label: labelProps,
+				// 🐨 add slots for onText, offText, and switch
+			}}
+		>
+			{/* 🐨 get rid of the ToggleContext here */}
 			<ToggleContext.Provider value={{ on, toggle, id }}>
 				{children}
 			</ToggleContext.Provider>
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
 
+// 🐨 delete everything below here!
 function useToggle() {
 	const context = use(ToggleContext)
 	if (context === undefined) {
@@ -51,7 +61,7 @@ export function ToggleOff({ children }: { children: React.ReactNode }) {
 
 export function ToggleButton({
 	...props
-}: Omit<React.ComponentProps<typeof Switch>, 'on' | 'onClick'>) {
+}: Omit<React.ComponentProps<typeof Switch>, 'on'>) {
 	const { on, toggle, id } = useToggle()
 	return <Switch {...props} id={id} on={on} onClick={toggle} />
 }
diff --git a/exercises/04.slots/03.problem/README.mdx b/exercises/04.slots/03.problem/README.mdx
deleted file mode 100644
index 0b5e2dc8..00000000
--- a/exercises/04.slots/03.problem/README.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Slot Prop
diff --git a/exercises/04.slots/03.problem/slots.tsx b/exercises/04.slots/03.problem/slots.tsx
deleted file mode 100644
index b557bc8f..00000000
--- a/exercises/04.slots/03.problem/slots.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { createContext, use } from 'react'
-import { Switch as BaseSwitch } from '#shared/switch'
-
-type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
-	slots,
-	children,
-}: {
-	slots: Slots
-	children: React.ReactNode
-}) {
-	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
-
-export function useSlotProps<Props>(
-	props: Props & { slot?: string },
-	defaultSlot?: string,
-): Props {
-	const slot = props.slot ?? defaultSlot
-	if (!slot) return props
-
-	const slots = use(SlotContext) ?? ({} as Slots)
-
-	// a more proper "mergeProps" function is in order here
-	// to handle things like merging event handlers better.
-	// we'll get to that a bit in a later exercise.
-	return { ...slots[slot], slot, ...props } as Props
-}
-
-export function Label(
-	props: React.ComponentProps<'label'> & { slot?: string },
-) {
-	props = useSlotProps(props, 'label')
-	return <label {...props} />
-}
-
-export function Input(
-	props: React.ComponentProps<'input'> & { slot?: string },
-) {
-	props = useSlotProps(props, 'input')
-	return <input {...props} />
-}
-
-export function Text(props: React.ComponentProps<'span'> & { slot?: string }) {
-	props = useSlotProps(props, 'text')
-	return <span {...props} />
-}
-
-export function Switch({
-	...props
-}: Omit<React.ComponentProps<typeof BaseSwitch>, 'on' | 'onClick'> & {
-	slot?: string
-}) {
-	return (
-		<BaseSwitch
-			{...(useSlotProps(props, 'switch') as React.ComponentProps<
-				typeof BaseSwitch
-			>)}
-		/>
-	)
-}
diff --git a/exercises/04.slots/01.solution/README.mdx b/exercises/04.slots/03.solution.prop/README.mdx
similarity index 100%
rename from exercises/04.slots/01.solution/README.mdx
rename to exercises/04.slots/03.solution.prop/README.mdx
diff --git a/exercises/04.slots/03.solution/app.tsx b/exercises/04.slots/03.solution.prop/app.tsx
similarity index 100%
rename from exercises/04.slots/03.solution/app.tsx
rename to exercises/04.slots/03.solution.prop/app.tsx
diff --git a/exercises/04.slots/03.solution/index.css b/exercises/04.slots/03.solution.prop/index.css
similarity index 100%
rename from exercises/04.slots/03.solution/index.css
rename to exercises/04.slots/03.solution.prop/index.css
diff --git a/exercises/04.slots/03.solution/index.tsx b/exercises/04.slots/03.solution.prop/index.tsx
similarity index 100%
rename from exercises/04.slots/03.solution/index.tsx
rename to exercises/04.slots/03.solution.prop/index.tsx
diff --git a/exercises/04.slots/03.solution/slots.tsx b/exercises/04.slots/03.solution.prop/slots.tsx
similarity index 70%
rename from exercises/04.slots/03.solution/slots.tsx
rename to exercises/04.slots/03.solution.prop/slots.tsx
index b557bc8f..e74f9358 100644
--- a/exercises/04.slots/03.solution/slots.tsx
+++ b/exercises/04.slots/03.solution.prop/slots.tsx
@@ -2,25 +2,16 @@ import { createContext, use } from 'react'
 import { Switch as BaseSwitch } from '#shared/switch'
 
 type Slots = Record<string, Record<string, unknown>>
-const SlotContext = createContext<Slots | null>(null)
-export function SlotProvider({
-	slots,
-	children,
-}: {
-	slots: Slots
-	children: React.ReactNode
-}) {
-	return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
-}
+export const SlotContext = createContext<Slots>({})
 
-export function useSlotProps<Props>(
+function useSlotProps<Props>(
 	props: Props & { slot?: string },
 	defaultSlot?: string,
 ): Props {
 	const slot = props.slot ?? defaultSlot
 	if (!slot) return props
 
-	const slots = use(SlotContext) ?? ({} as Slots)
+	const slots = use(SlotContext)
 
 	// a more proper "mergeProps" function is in order here
 	// to handle things like merging event handlers better.
@@ -47,11 +38,11 @@ export function Text(props: React.ComponentProps<'span'> & { slot?: string }) {
 	return <span {...props} />
 }
 
-export function Switch({
-	...props
-}: Omit<React.ComponentProps<typeof BaseSwitch>, 'on' | 'onClick'> & {
-	slot?: string
-}) {
+export function Switch(
+	props: Omit<React.ComponentProps<typeof BaseSwitch>, 'on'> & {
+		slot?: string
+	},
+) {
 	return (
 		<BaseSwitch
 			{...(useSlotProps(props, 'switch') as React.ComponentProps<
diff --git a/exercises/04.slots/03.solution.prop/text-field.tsx b/exercises/04.slots/03.solution.prop/text-field.tsx
new file mode 100644
index 00000000..c3107e2f
--- /dev/null
+++ b/exercises/04.slots/03.solution.prop/text-field.tsx
@@ -0,0 +1,22 @@
+import { useId } from 'react'
+import { SlotContext } from './slots'
+
+export function TextField({
+	id,
+	children,
+}: {
+	id?: string
+	children: React.ReactNode
+}) {
+	const generatedId = useId()
+	id = id ?? generatedId
+
+	const labelProps = { htmlFor: id }
+	const inputProps = { id }
+
+	return (
+		<SlotContext.Provider value={{ label: labelProps, input: inputProps }}>
+			{children}
+		</SlotContext.Provider>
+	)
+}
diff --git a/exercises/04.slots/03.solution/toggle.tsx b/exercises/04.slots/03.solution.prop/toggle.tsx
similarity index 85%
rename from exercises/04.slots/03.solution/toggle.tsx
rename to exercises/04.slots/03.solution.prop/toggle.tsx
index 3c8b268c..c79261ef 100644
--- a/exercises/04.slots/03.solution/toggle.tsx
+++ b/exercises/04.slots/03.solution.prop/toggle.tsx
@@ -1,5 +1,5 @@
 import { useId, useState } from 'react'
-import { SlotProvider } from './slots'
+import { SlotContext } from './slots'
 
 export function Toggle({
 	id,
@@ -20,8 +20,8 @@ export function Toggle({
 	const switchProps = { id, on, onClick: toggle }
 
 	return (
-		<SlotProvider
-			slots={{
+		<SlotContext.Provider
+			value={{
 				label: labelProps,
 				onText: onTextProps,
 				offText: offTextProps,
@@ -29,6 +29,6 @@ export function Toggle({
 			}}
 		>
 			{children}
-		</SlotProvider>
+		</SlotContext.Provider>
 	)
 }
diff --git a/exercises/04.slots/03.solution/README.mdx b/exercises/04.slots/03.solution/README.mdx
deleted file mode 100644
index 0b5e2dc8..00000000
--- a/exercises/04.slots/03.solution/README.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Slot Prop
diff --git a/exercises/04.slots/03.solution/text-field.tsx b/exercises/04.slots/03.solution/text-field.tsx
deleted file mode 100644
index 479f548b..00000000
--- a/exercises/04.slots/03.solution/text-field.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useId } from 'react'
-import { SlotProvider } from './slots'
-
-export function TextField({
-	id,
-	children,
-}: {
-	id?: string
-	children: React.ReactNode
-}) {
-	const generatedId = useId()
-	id = id ?? generatedId
-
-	const labelProps = { htmlFor: id }
-	const inputProps = { id }
-
-	return (
-		<SlotProvider slots={{ label: labelProps, input: inputProps }}>
-			{children}
-		</SlotProvider>
-	)
-}
diff --git a/exercises/06.state-reducer/01.problem/toggle.tsx b/exercises/06.state-reducer/01.problem/toggle.tsx
index fef70df5..d41a060e 100644
--- a/exercises/06.state-reducer/01.problem/toggle.tsx
+++ b/exercises/06.state-reducer/01.problem/toggle.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import { useReducer, useRef } from 'react'
 
 function callAll<Args extends Array<unknown>>(
 	...fns: Array<((...args: Args) => unknown) | undefined>
diff --git a/exercises/06.state-reducer/01.solution/toggle.tsx b/exercises/06.state-reducer/01.solution/toggle.tsx
index 2d07d757..57a8df53 100644
--- a/exercises/06.state-reducer/01.solution/toggle.tsx
+++ b/exercises/06.state-reducer/01.solution/toggle.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import { useReducer, useRef } from 'react'
 
 function callAll<Args extends Array<unknown>>(
 	...fns: Array<((...args: Args) => unknown) | undefined>
diff --git a/exercises/06.state-reducer/02.problem.default/toggle.tsx b/exercises/06.state-reducer/02.problem.default/toggle.tsx
index 2d07d757..57a8df53 100644
--- a/exercises/06.state-reducer/02.problem.default/toggle.tsx
+++ b/exercises/06.state-reducer/02.problem.default/toggle.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import { useReducer, useRef } from 'react'
 
 function callAll<Args extends Array<unknown>>(
 	...fns: Array<((...args: Args) => unknown) | undefined>
diff --git a/exercises/06.state-reducer/02.solution.default/toggle.tsx b/exercises/06.state-reducer/02.solution.default/toggle.tsx
index 3dfd7bdd..ee7a80e9 100644
--- a/exercises/06.state-reducer/02.solution.default/toggle.tsx
+++ b/exercises/06.state-reducer/02.solution.default/toggle.tsx
@@ -1,4 +1,4 @@
-import type * as React from 'react'
+import { useReducer, useRef } from 'react'
 
 function callAll<Args extends Array<unknown>>(
 	...fns: Array<((...args: Args) => unknown) | undefined>
diff --git a/shared/switch.tsx b/shared/switch.tsx
index 449248cc..39b43cff 100644
--- a/shared/switch.tsx
+++ b/shared/switch.tsx
@@ -13,7 +13,7 @@ export function Switch({
 	'aria-label': ariaLabel,
 	onClick,
 	...props
-}: { on: boolean } & Omit<JSX.IntrinsicElements['button'], 'ref'>) {
+}: { on: boolean } & React.ComponentProps<'button'>) {
 	const btnClassName = [
 		className,
 		'toggle-btn',