SolidJS•2mo ago

How to make components with multiple global states

<Dropdown>
  <DropdownTrigger>  abc  <DropdownTrigger>
  <DropdownContent>  FLOATING DIV </DropdownContent>
</Dropdown>

<Dropdown>
  <DropdownTrigger>  abc  <DropdownTrigger>
  <DropdownContent>  FLOATING DIV </DropdownContent>
</Dropdown>

So i could add onclick() for the trigger element and the content div will get toggled as per the state , but if i define state in a store.ts file then every <Dropdown> will share the same state only thing i could think of is adding id prop to each of the Dropdown* components but that sounds messy 😨

3 Replies

REEEEE•2mo ago

Use a context

Madaxen86•2mo ago

Global state won’t do it. You need scoped state: Create the store in your root component. Dropdown in this case. Use context to share it with its children. So you can easily nest them in each other as well.

siduckOP•2mo ago

thanks thanks to u too :v

Gaming

Programming

How to make components with multiple global states

Did you find this page helpful?