no .Provider

exercises/03.compound-components/01.problem.context/README.mdx

@@ -28,7 +28,7 @@ controlling whether it's shown or not.
 
 Your job will be to make a `ToggleContext` which will be used to implicitly
 share the state between these components. The `Toggle` component will render the
-`ToggleContext.Provider` and the other compound components will access that
+`ToggleContext` and the other compound components will access that
 implicit state via `use(ToggleContext)`.
 
 🦺 TypeScript might not like your `use` call depending on how you set up your

exercises/03.compound-components/01.problem.context/toggle.tsx

@@ -11,7 +11,7 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)
 
- // 💣 remove this and instead return <ToggleContext.Provider> where
+ // 💣 remove this and instead return <ToggleContext> where
  // the value is an object that has `on` and `toggle` on it. Render children
  // within the provider.
  return <>TODO...</>

exercises/03.compound-components/01.solution.context/toggle.tsx

@@ -8,11 +8,7 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)
 
- return (
- <ToggleContext.Provider value={{ on, toggle }}>
- {children}
- </ToggleContext.Provider>
- )
+ return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
 export function ToggleOn({ children }: { children: React.ReactNode }) {

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

@@ -8,11 +8,7 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)
 
- return (
- <ToggleContext.Provider value={{ on, toggle }}>
- {children}
- </ToggleContext.Provider>
- )
+ return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
 export function ToggleOn({ children }: { children: React.ReactNode }) {

exercises/03.compound-components/02.solution.validation/toggle.tsx

@@ -8,11 +8,7 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)
 
- return (
- <ToggleContext.Provider value={{ on, toggle }}>
- {children}
- </ToggleContext.Provider>
- )
+ return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
 function useToggle() {

exercises/04.slots/01.problem.context/text-field.tsx

@@ -13,6 +13,6 @@ export function TextField({
  // 🐨 create a slots object that has props for both label and input slots
  // 💰 the label should provide an htmlFor prop and the input should provide an id
 
- // 🐨 wrap this in a SlotContext.Provider with the value set to the slots object
+ // 🐨 wrap this in a SlotContext with the value set to the slots object
  return children
 }

exercises/04.slots/01.problem.context/toggle.tsx

@@ -8,11 +8,7 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)
 
- return (
- <ToggleContext.Provider value={{ on, toggle }}>
- {children}
- </ToggleContext.Provider>
- )
+ return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
 function useToggle() {

exercises/04.slots/01.solution.context/text-field.tsx

@@ -16,5 +16,5 @@ export function TextField({
  input: { id },
  }
 
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+ return <SlotContext value={slots}>{children}</SlotContext>
 }

exercises/04.slots/01.solution.context/toggle.tsx

@@ -8,11 +8,7 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  const [on, setOn] = useState(false)
  const toggle = () => setOn(!on)
 
- return (
- <ToggleContext.Provider value={{ on, toggle }}>
- {children}
- </ToggleContext.Provider>
- )
+ return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
 function useToggle() {

exercises/04.slots/02.problem.generic/text-field.tsx

@@ -16,5 +16,5 @@ export function TextField({
  input: { id },
  }
 
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+ return <SlotContext value={slots}>{children}</SlotContext>
 }

exercises/04.slots/02.problem.generic/toggle.tsx

@@ -15,13 +15,9 @@ export function Toggle({ children }: { children: React.ReactNode }) {
  // 🐨 create a slots object that has props for a slot called
  // "label" with an htmlFor prop
 
- // 🐨 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}
- </ToggleContext.Provider>
- )
+ // 🐨 wrap this in SlotContext and pass the labelProps in the label slot
+ // 🐨 add the id to the value in the ToggleContext
+ return <ToggleContext value={{ on, toggle }}>{children}</ToggleContext>
 }
 
 function useToggle() {

exercises/04.slots/02.solution.generic/text-field.tsx

@@ -16,5 +16,5 @@ export function TextField({
  input: { id },
  }
 
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+ return <SlotContext value={slots}>{children}</SlotContext>
 }

exercises/04.slots/02.solution.generic/toggle.tsx

@@ -21,11 +21,9 @@ export function Toggle({
  const slots = { label: { htmlFor: id } }
 
  return (
- <SlotContext.Provider value={slots}>
- <ToggleContext.Provider value={{ on, toggle, id }}>
- {children}
- </ToggleContext.Provider>
- </SlotContext.Provider>
+ <SlotContext value={slots}>
+ <ToggleContext value={{ on, toggle, id }}>{children}</ToggleContext>
+ </SlotContext>
  )
 }
 

exercises/04.slots/03.problem.prop/text-field.tsx

@@ -16,5 +16,5 @@ export function TextField({
  input: { id },
  }
 
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+ return <SlotContext value={slots}>{children}</SlotContext>
 }

exercises/04.slots/03.problem.prop/toggle.tsx

@@ -26,12 +26,10 @@ export function Toggle({
  }
 
  return (
- <SlotContext.Provider value={slots}>
+ <SlotContext value={slots}>
  {/* 🐨 get rid of the ToggleContext here */}
- <ToggleContext.Provider value={{ on, toggle, id }}>
- {children}
- </ToggleContext.Provider>
- </SlotContext.Provider>
+ <ToggleContext value={{ on, toggle, id }}>{children}</ToggleContext>
+ </SlotContext>
  )
 }
 

exercises/04.slots/03.solution.prop/text-field.tsx

@@ -16,5 +16,5 @@ export function TextField({
  input: { id },
  }
 
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+ return <SlotContext value={slots}>{children}</SlotContext>
 }

exercises/04.slots/03.solution.prop/toggle.tsx

@@ -20,7 +20,7 @@ export function Toggle({
  const switchProps = { id, on, onClick: toggle }
 
  return (
- <SlotContext.Provider
+ <SlotContext
  value={{
  label: labelProps,
  onText: onTextProps,
@@ -29,6 +29,6 @@ export function Toggle({
  }}
  >
  {children}
- </SlotContext.Provider>
+ </SlotContext>
  )
 }

exercises/04.slots/README.mdx

@@ -95,7 +95,7 @@ function NumberField({ children }: { children: React.ReactNode }) {
  description: { id: descriptionId },
  input: { id: inputId, 'aria-describedby': descriptionId },
  }
- return <SlotContext.Provider value={slots}>{children}</SlotContext.Provider>
+ return <SlotContext value={slots}>{children}</SlotContext>
 }
 ```