Context.Provider breaks reactivity

Need help with a simple Context Provider issue.
Here's a little sample of the code:

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

ESLint throws "The reactive variable 'contextValue' should be used within JSX, a tracked scope (like createEffect), or inside an event handler function, or else changes will be ignored."
And that's what happens. The ChildComponents which consume the context do not get updated.
What do I need to do to makes this work. Thanks a bunch ahead already.

SolidJS•3y ago•

31 replies

Madaxen86

Context.Provider breaks reactivity

Need help with a simple Context Provider issue.
Here's a little sample of the code:

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

const Accordion: ParentComponent<AccordionProps> = (props) => {
 const contextValue = createMemo(() => ({    open: props.open,    icon: icon(),    animate: animate(),    disabled: disabled(),  }));  createEffect(() => console.log("Accordion:", props.open, contextValue()));  // 5. return  return (    <AccordionContext.Provider value={contextValue()}>      <div {...props} class={accordionClasses()}>        {props.children}      </div>    </AccordionContext.Provider>  ); }

Context.Provider breaks reactivity

Similar Threads

Context.Provider breaks reactivity

Similar Threads

Similar Threads

Similar Threads