[🐞] UseContext doesn't work with Slot when value is changed

[SvetlanaMuravlova]

Which component is affected?

Qwik Runtime

Describe the bug

I am new in react, honestly i have no experience there at all. I am trying your framework and it is really great thing, but i faced one critical issue. I am trying to create a qwik lib, and i need to pass actual data from parent component to child thought Slot tag. Regarding to your doc i decided to achieve it with context, but it doesn't work in this way. May be i do something wrong, or it is really bug? May be there is some workaround or some another way?

Reproduction

https://stackblitz.com/edit/qwik-starter-d3apv5?file=package.json

Steps to reproduce

You can click on tabs and content doesn't change, if active tab changes content changes also. Or you can use consoles, to see actual data

System Info

"@builder.io/qwik": "^0.16.1",
    "@builder.io/qwik-city": "^0.0.128",

Additional Information

I saw previous issues regarding context and slots, but you marked it as resolved, so or issue isn't resolved or i use it incorrectly, but it is according your documentation

[bolt-new-by-stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-d3apv5 (Open reproduction)

[Dindaleon]

yeah, I am still having this issue. I am on version 0.16.2

It breaks when going to login page DEMO on stackblitz

[manucorporat]

Looking at the provided repo, it does not seem like an issue:

  const state = useStore<IState>(
    {
      _tabs: [],
      classMap: {},
      ariaLabel: 'Tabs',
      // @ts-ignore
      activeTab: {},
    },
    { recursive: true }
  );

  useContextProvider(TabsContext, state._tabs);
  useContextProvider(ActiveTabContext, state.activeTab);

Context in Qwik is static, ie, you cant change the value, reactivity is provided by stores and signals, what you need to pass to the context is the state object itself, not a single value.

The value gets copied and reactivity is lost.

Going to look into extending the docs for context to make this clear:

  useContextProvider(TabsContext, state);

[SvetlanaMuravlova]

@manucorporat , thank you for your replay, i will try it i will close it now but documentation should be extended at all, cause i see some properties and details which are missed in doc, it would be really helpful) thank you for your work)

[SvetlanaMuravlova]

@manucorporat i've tried to change logic as you said and it doesn't work anyway there is updated result https://stackblitz.com/edit/qwik-starter-d3apv5?file=src%2Fcomponents%2Ftabs%2Ftabs.tsx,src%2Fcomponents%2Ftabs%2Ftab.tsx

context work when component is rendered at first and then it doesn't triggered I believe all it is because of Slot so i reopen issue, cause i still have this problem

[Dindaleon]

Looking at the provided repo, it does not seem like an issue:

  const state = useStore<IState>(

    {

      _tabs: [],

      classMap: {},

      ariaLabel: 'Tabs',

      // @ts-ignore

      activeTab: {},

    },

    { recursive: true }

  );



  useContextProvider(TabsContext, state._tabs);

  useContextProvider(ActiveTabContext, state.activeTab);

Context in Qwik is static, ie, you cant change the value, reactivity is provided by stores and signals, what you need to pass to the context is the state object itself, not a single value.

The value gets copied and reactivity is lost.

Going to look into extending the docs for context to make this clear:

  useContextProvider(TabsContext, state);

Yeah, this won't work either. I posted a temporal fix in other post, until an official fix is released or the docs clear up the issue.

[utherpally]

@SvetlanaMuravlova my working version base on your provided repo https://stackblitz.com/edit/qwik-starter-h9vwdt?file=src%2Fcomponents%2Ftabs%2Ftabs.tsx,src%2Fcomponents%2Ftabs%2Ftab.tsx,src%2Froutes%2Flayout.tsx

[SvetlanaMuravlova]

@SvetlanaMuravlova my working version base on your provided repo https://stackblitz.com/edit/qwik-starter-h9vwdt?file=src%2Fcomponents%2Ftabs%2Ftabs.tsx,src%2Fcomponents%2Ftabs%2Ftab.tsx,src%2Froutes%2Flayout.tsx

oh, i see thank you for your fixies and comments, now it is clear for me)