SolidJS•16mo ago

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•16mo 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

Mathieu•16mo ago

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

REEEEE•16mo ago

It would have to be a hardcoded value

Mathieu•16mo ago

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

REEEEE•16mo ago

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

Mathieu•16mo ago

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

REEEEE•16mo 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>

Mathieu•16mo 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•16mo ago

Okay no problem

Mathieu•16mo 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•16mo ago

Yeah, I'll have a look

Mathieu•16mo 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•16mo ago

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

Mathieu•16mo 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•16mo 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

Mathieu•16mo ago

@._rb the class for selection is not updated

REEEEE•16mo 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

Mathieu•16mo ago

mmm

REEEEE•16mo 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

Mathieu•16mo ago

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

REEEEE•16mo ago

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

Mathieu•16mo 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•16mo ago

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

Mathieu•16mo ago

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

REEEEE•16mo 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

Mathieu•16mo ago

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

REEEEE•16mo 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

Mathieu•16mo 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•16mo 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

Mathieu•16mo 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•16mo ago

I see. I'll let the docs team know

Mathieu•16mo ago

thx a lot for your help < 3

Gaming

Programming

Parent setting prop to child with Context?