Context with children(() => props.children) helper triggers an error
Hey! I've been trying to create a
Stepper
component in which I'd have StepperContext
with its API. however, somehow I need to control the displayed children, I found the children
helper but it doesn't work with context
https://playground.solidjs.com/anonymous/92dca985-17bc-4cbb-b2d8-d4b95fb33a33
am I missing something?Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
73 Replies
children
isn't necessary in that example, it's for more advanced use cases where you would otherwise be accessing props.children
more than once
the reason it errors is because children
is basically createMemo
- it eagerly evaluates the function inside it, which happens outside of the contextbut how to control the displayed child? I would like children to use context to control it
for example, if the
currentIndex
is 0
, then the first child will be shown
yeah the children
helper above the context provider executes all children outside of the contextyou don't need the children, but for
stepper.currentIndex()
to be reactive you have to wrap it in jsxSolid Playground
Quickly discover what the solid compiler will generate from your JSX template
in that case you would need
children
something like this
should the
currentIndex
be updated each second there? seems like nothing happensno it's a timeout, not an interval
oh
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
yeah got it!
thank you :)
you are welcome
you can think of
jsx
as if it is an effect
so just calling a signal inside the body of a component will not be reactive, but if you call it inside an effect/memo/jsx it will be
but if the goal is to display a certain html-element from its children, you maybe don't need context:
like brendonovich showedthe goal is to give the control of current index to
Step
s. so you can skip a step inside a step
for example inside a step...
instepcion
so the context should pass the setter and not the getter?
?
oh, typo
o wait lol now i make the same mistake again haha