Questions on the `owner` of using children() helper inside a context
I'm writing a component to show Toast.
The idea is to wrap the main component inside a ToastContext. It exposes a method success() to show a Toast for a successful action.
The shorten demo code is here https://playground.solidjs.com/anonymous/b8a41bdc-5569-41a0-86f5-d8fe42583d8f
- If I used
props.children inside the ToastContext, then the component can useContext normally. We can see the context in the owner chain
- If I used children() helper inside the ToastContext, when the component use useContext , it results in a undefined context. There is no context in the owner chain
So:
- Why using children() helper does not keep the correct owner?
- How is an owner attached? I assume that as long as it is inside a JSX element, that JSX element is the owner, but it seems not to be the case here.Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
2 Replies
it's resolved where the
children call is, in this case outside the provider
if you want to pass a context either wrap the entire component containing the children call with the provider, or wrap the props.children access in the helper with the provider e.g. children(() => <ToastContext.Provider>{props.children}</ToastContext.Provider>)Got it! I tried wrapping inside a component and it works
https://playground.solidjs.com/anonymous/d4218a57-cd00-438d-a2eb-5641c6a52ae2
Thanks for the advice
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template