From a60cd361a6269007781e6c94dbf187a2da536094 Mon Sep 17 00:00:00 2001 From: "Kent C. Dodds" Date: Mon, 13 May 2024 09:23:54 -0600 Subject: [PATCH] no .Provider --- .../01.problem.context/README.mdx | 2 +- .../01.problem.context/toggle.tsx | 2 +- .../01.solution.context/toggle.tsx | 6 +----- .../02.problem.validation/toggle.tsx | 6 +----- .../02.solution.validation/toggle.tsx | 6 +----- exercises/04.slots/01.problem.context/text-field.tsx | 2 +- exercises/04.slots/01.problem.context/toggle.tsx | 6 +----- exercises/04.slots/01.solution.context/text-field.tsx | 2 +- exercises/04.slots/01.solution.context/toggle.tsx | 6 +----- exercises/04.slots/02.problem.generic/text-field.tsx | 2 +- exercises/04.slots/02.problem.generic/toggle.tsx | 10 +++------- exercises/04.slots/02.solution.generic/text-field.tsx | 2 +- exercises/04.slots/02.solution.generic/toggle.tsx | 8 +++----- exercises/04.slots/03.problem.prop/text-field.tsx | 2 +- exercises/04.slots/03.problem.prop/toggle.tsx | 8 +++----- exercises/04.slots/03.solution.prop/text-field.tsx | 2 +- exercises/04.slots/03.solution.prop/toggle.tsx | 4 ++-- exercises/04.slots/README.mdx | 2 +- 18 files changed, 25 insertions(+), 53 deletions(-) diff --git a/exercises/03.compound-components/01.problem.context/README.mdx b/exercises/03.compound-components/01.problem.context/README.mdx index 1621b48d..185e749d 100644 --- a/exercises/03.compound-components/01.problem.context/README.mdx +++ b/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 diff --git a/exercises/03.compound-components/01.problem.context/toggle.tsx b/exercises/03.compound-components/01.problem.context/toggle.tsx index cc98a1bf..308443a3 100644 --- a/exercises/03.compound-components/01.problem.context/toggle.tsx +++ b/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 where + // 💣 remove this and instead return where // the value is an object that has `on` and `toggle` on it. Render children // within the provider. return <>TODO... diff --git a/exercises/03.compound-components/01.solution.context/toggle.tsx b/exercises/03.compound-components/01.solution.context/toggle.tsx index a558e116..978a30ee 100644 --- a/exercises/03.compound-components/01.solution.context/toggle.tsx +++ b/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 ( - - {children} - - ) + return {children} } export function ToggleOn({ children }: { children: React.ReactNode }) { diff --git a/exercises/03.compound-components/02.problem.validation/toggle.tsx b/exercises/03.compound-components/02.problem.validation/toggle.tsx index a558e116..978a30ee 100644 --- a/exercises/03.compound-components/02.problem.validation/toggle.tsx +++ b/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 ( - - {children} - - ) + return {children} } export function ToggleOn({ children }: { children: React.ReactNode }) { diff --git a/exercises/03.compound-components/02.solution.validation/toggle.tsx b/exercises/03.compound-components/02.solution.validation/toggle.tsx index dd3af46f..3c2db466 100644 --- a/exercises/03.compound-components/02.solution.validation/toggle.tsx +++ b/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 ( - - {children} - - ) + return {children} } function useToggle() { diff --git a/exercises/04.slots/01.problem.context/text-field.tsx b/exercises/04.slots/01.problem.context/text-field.tsx index 498bc017..9fbe4405 100644 --- a/exercises/04.slots/01.problem.context/text-field.tsx +++ b/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 } diff --git a/exercises/04.slots/01.problem.context/toggle.tsx b/exercises/04.slots/01.problem.context/toggle.tsx index dd3af46f..3c2db466 100644 --- a/exercises/04.slots/01.problem.context/toggle.tsx +++ b/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 ( - - {children} - - ) + return {children} } function useToggle() { diff --git a/exercises/04.slots/01.solution.context/text-field.tsx b/exercises/04.slots/01.solution.context/text-field.tsx index 31023d0b..afb5bfa2 100644 --- a/exercises/04.slots/01.solution.context/text-field.tsx +++ b/exercises/04.slots/01.solution.context/text-field.tsx @@ -16,5 +16,5 @@ export function TextField({ input: { id }, } - return {children} + return {children} } diff --git a/exercises/04.slots/01.solution.context/toggle.tsx b/exercises/04.slots/01.solution.context/toggle.tsx index dd3af46f..3c2db466 100644 --- a/exercises/04.slots/01.solution.context/toggle.tsx +++ b/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 ( - - {children} - - ) + return {children} } function useToggle() { diff --git a/exercises/04.slots/02.problem.generic/text-field.tsx b/exercises/04.slots/02.problem.generic/text-field.tsx index 31023d0b..afb5bfa2 100644 --- a/exercises/04.slots/02.problem.generic/text-field.tsx +++ b/exercises/04.slots/02.problem.generic/text-field.tsx @@ -16,5 +16,5 @@ export function TextField({ input: { id }, } - return {children} + return {children} } diff --git a/exercises/04.slots/02.problem.generic/toggle.tsx b/exercises/04.slots/02.problem.generic/toggle.tsx index a1cb6fa9..c0d68d02 100644 --- a/exercises/04.slots/02.problem.generic/toggle.tsx +++ b/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 ( - - {children} - - ) + // 🐨 wrap this in SlotContext and pass the labelProps in the label slot + // 🐨 add the id to the value in the ToggleContext + return {children} } function useToggle() { diff --git a/exercises/04.slots/02.solution.generic/text-field.tsx b/exercises/04.slots/02.solution.generic/text-field.tsx index 31023d0b..afb5bfa2 100644 --- a/exercises/04.slots/02.solution.generic/text-field.tsx +++ b/exercises/04.slots/02.solution.generic/text-field.tsx @@ -16,5 +16,5 @@ export function TextField({ input: { id }, } - return {children} + return {children} } diff --git a/exercises/04.slots/02.solution.generic/toggle.tsx b/exercises/04.slots/02.solution.generic/toggle.tsx index 0c99f9d3..74c8405a 100644 --- a/exercises/04.slots/02.solution.generic/toggle.tsx +++ b/exercises/04.slots/02.solution.generic/toggle.tsx @@ -21,11 +21,9 @@ export function Toggle({ const slots = { label: { htmlFor: id } } return ( - - - {children} - - + + {children} + ) } diff --git a/exercises/04.slots/03.problem.prop/text-field.tsx b/exercises/04.slots/03.problem.prop/text-field.tsx index 31023d0b..afb5bfa2 100644 --- a/exercises/04.slots/03.problem.prop/text-field.tsx +++ b/exercises/04.slots/03.problem.prop/text-field.tsx @@ -16,5 +16,5 @@ export function TextField({ input: { id }, } - return {children} + return {children} } diff --git a/exercises/04.slots/03.problem.prop/toggle.tsx b/exercises/04.slots/03.problem.prop/toggle.tsx index 1f348b70..438cb57d 100644 --- a/exercises/04.slots/03.problem.prop/toggle.tsx +++ b/exercises/04.slots/03.problem.prop/toggle.tsx @@ -26,12 +26,10 @@ export function Toggle({ } return ( - + {/* 🐨 get rid of the ToggleContext here */} - - {children} - - + {children} + ) } diff --git a/exercises/04.slots/03.solution.prop/text-field.tsx b/exercises/04.slots/03.solution.prop/text-field.tsx index 31023d0b..afb5bfa2 100644 --- a/exercises/04.slots/03.solution.prop/text-field.tsx +++ b/exercises/04.slots/03.solution.prop/text-field.tsx @@ -16,5 +16,5 @@ export function TextField({ input: { id }, } - return {children} + return {children} } diff --git a/exercises/04.slots/03.solution.prop/toggle.tsx b/exercises/04.slots/03.solution.prop/toggle.tsx index 99af9c5f..b6c40cda 100644 --- a/exercises/04.slots/03.solution.prop/toggle.tsx +++ b/exercises/04.slots/03.solution.prop/toggle.tsx @@ -20,7 +20,7 @@ export function Toggle({ const switchProps = { id, on, onClick: toggle } return ( - {children} - + ) } diff --git a/exercises/04.slots/README.mdx b/exercises/04.slots/README.mdx index 3623ebcd..5d3f8223 100644 --- a/exercises/04.slots/README.mdx +++ b/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 {children} + return {children} } ```