Parent setting prop to child with Context?

Say I have the following component:

<ToggleButtonGroup onChange={handleToggleChange}>
  <ToggleButton id="key">
    Foo
  </ToggleButton>
  <ToggleButton id="anotherKey">
    Bar
  </ToggleButton>
  <ToggleButton id="andAnotherKey">
    Baz
  </ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup onChange={handleToggleChange}>
  <ToggleButton id="key">
    Foo
  </ToggleButton>
  <ToggleButton id="anotherKey">
    Bar
  </ToggleButton>
  <ToggleButton id="andAnotherKey">
    Baz
  </ToggleButton>
</ToggleButtonGroup>

A context provider allows the children ToggleButton to access onChange in order to call this callback when a toggle is clicked. Question: how can I set the default selected toggle (when none is provided as above) as "key"? As far as I know there might be no way.

32 Replies

REEEEE•2y ago

Depends on how ToggleButton is written and where the state of the active button is stored If the value of the active button is stored in the context and it takes the value as a prop but is optional, you could use mergeProps to set a default value

MathieuOP•2y ago

@._rb where would I get the default value from?

REEEEE•2y ago

It would have to be a hardcoded value

MathieuOP•2y ago

I don't have access to the children like that as far as I understand

REEEEE•2y ago

or add another prop to ToggleButtonGroup that specifies the defaultValue if no value is provided

MathieuOP•2y ago

@._rb yes, a default value is the best way I guess

REEEEE•2y ago

<ToggleButtonGroup defaultValue="key" onChange={handleToggleChange}>
  <ToggleButton id="key">
    Foo
  </ToggleButton>
  <ToggleButton id="anotherKey">
    Bar
  </ToggleButton>
  <ToggleButton id="andAnotherKey">
    Baz
  </ToggleButton>
</ToggleButtonGroup>

<ToggleButtonGroup defaultValue="key" onChange={handleToggleChange}>
  <ToggleButton id="key">
    Foo
  </ToggleButton>
  <ToggleButton id="anotherKey">
    Bar
  </ToggleButton>
  <ToggleButton id="andAnotherKey">
    Baz
  </ToggleButton>
</ToggleButtonGroup>

MathieuOP•2y ago

@._rb actually my component is not working for some reason, but you answered the question @._rb I will make a REPL, it's really a stupid component but am missing something

REEEEE•2y ago

Okay no problem

MathieuOP•2y ago

thanks for the help man. I'll also make a REPL if u can have a quick look, there's very little code.

REEEEE•2y ago

Yeah, I'll have a look

MathieuOP•2y ago

@._rb https://playground.solidjs.com/anonymous/6d86f710-5b4d-4180-9121-e8473bd4ae90 The effect doesn't work

createEffect(() => {
  console.log('->', selectedToggle());
})

createEffect(() => {
  console.log('->', selectedToggle());
})

I'm missing something but I don't see what

REEEEE•2y ago

don't use the children function in ToggleButtonGroup just use props.children in the span

MathieuOP•2y ago

@._rb I'll try to understand that, in the meanwhile there is still some issue where the selected class doesnt get updated classList={{selected: selectedToggle === props.id}}

REEEEE•2y ago

https://playground.solidjs.com/anonymous/3cc21fd3-8b04-4f26-a45c-b5175d9b86e5

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

MathieuOP•2y ago

@._rb the class for selection is not updated

REEEEE•2y ago

https://playground.solidjs.com/anonymous/895df86d-e3a8-431f-954a-66c77f5ad6bf

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

MathieuOP•2y ago

mmm

REEEEE•2y ago

You can't pass props.selectedToggle by itself because it is a getter and you are destructuring the return of useToggle which causes selectedToggle to lose reactivity

MathieuOP•2y ago

@._rb I see thank you. actually, how does destructuring technically messes with the getter functions?

REEEEE•2y ago

when getters are destructured in js, they get called and return their value

MathieuOP•2y ago

@._rb there's one thing left that I do not understand. In my broken code, in ToggleButton, it emits a warning that the id prop (when logging it) is reactive and should be used in an effect or jsx. You can see that warning here in ToggleButton: https://playground.solidjs.com/anonymous/6d86f710-5b4d-4180-9121-e8473bd4ae90 In your code however, there is no such warning: https://playground.solidjs.com/anonymous/895df86d-e3a8-431f-954a-66c77f5ad6bf I can't figure out why in your code the warning is not there (id prop is not reactive)

REEEEE•2y ago

I see the warning on the second link ctrl + s, and you'll see it

MathieuOP•2y ago

@._rb ah right but is Solid wrong here? the id prop is definitely not reactive. why would it detect it as reactive.

REEEEE•2y ago

all props are treated as reactive by the eslint plugin It doesn't know anything about the values the props have as far as I know

MathieuOP•2y ago

@._rb in that case I should leave a warning in my codebase?

REEEEE•2y ago

Yes, it should be fine From what I understand, the warning is primarily saying that if the prop is reactive and you want to be able to react to it's changes, you should use it in a reactive scope

MathieuOP•2y ago

So about the initial problem where I called children helper. I'm now a little confused as when to use it or not. You have left the children call in ToggleButton but it seems I also don't need the children helper there. I need to call the helper only when I want to style the children? (js style property for instance)

REEEEE•2y ago

I'm not too familiar with the children helper and it's use cases. You can remove it from ToggleButton as well, I just forgot to remove it. You generally won't need to use the children helper in most cases

MathieuOP•2y ago

@._rb I believe the docs can improve on the children but when it first introduces the children, it mentions the helper and we have only code with the helper. I've mistakingly understood that it is mandatory 😅

REEEEE•2y ago

I see. I'll let the docs team know

MathieuOP•2y ago

thx a lot for your help < 3

Gaming

Programming

Parent setting prop to child with Context?