#Parent setting prop to child with Context?

43 messages · Page 1 of 1 (latest)

brisk summit
#

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>

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.

halcyon stirrup
#

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

brisk summit
#

@halcyon stirrup where would I get the default value from?

halcyon stirrup
#

It would have to be a hardcoded value

brisk summit
#

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

halcyon stirrup
#

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

brisk summit
#

@halcyon stirrup yes, a default value is the best way I guess

halcyon stirrup
# 
<ToggleButtonGroup defaultValue="key" onChange={handleToggleChange}>
  <ToggleButton id="key">
    Foo
  </ToggleButton>
  <ToggleButton id="anotherKey">
    Bar
  </ToggleButton>
  <ToggleButton id="andAnotherKey">
    Baz
  </ToggleButton>
</ToggleButtonGroup>
brisk summit
#

@halcyon stirrup actually my component is not working for some reason, but you answered the question

#

@halcyon stirrup I will make a REPL, it's really a stupid component but am missing something

halcyon stirrup
#

Okay no problem

brisk summit
#

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

halcyon stirrup
#

Yeah, I'll have a look

brisk summit
#

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

halcyon stirrup
#

don't use the children function in ToggleButtonGroup

#

just use props.children in the span

brisk summit
#

@halcyon stirrup 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}}

halcyon stirrup
brisk summit
#

@halcyon stirrup the class for selection is not updated

halcyon stirrup
brisk summit
#

mmm

halcyon stirrup
#

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

brisk summit
#

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

halcyon stirrup
#

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

brisk summit
#

I can't figure out why in your code the warning is not there

#

(id prop is not reactive)

halcyon stirrup
#

I see the warning on the second link

#

ctrl + s, and you'll see it

brisk summit
#

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

halcyon stirrup
#

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

brisk summit
#

@halcyon stirrup in that case I should leave a warning in my codebase?

halcyon stirrup
#

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

brisk summit
#

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)

halcyon stirrup
#

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

brisk summit
#

@halcyon stirrup 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 😅

halcyon stirrup
#

I see. I'll let the docs team know