S
SolidJS•2y ago
Ladvace

Reactive var in obj

I have a context provider with an object, one of the property is conditional based on a prop you pass, what is the best way to handle the reactive property in this case? 
  const query = () =>
    condition ? 1 : 2;

  const context = {
    // ... other properties
    query: query(),  // The reactive variable 'query' should be used within JSX, a tracked                         scope (like createEffect), or inside an event handler function.
  };

  return (
    <Wrapper.Provider value={context}>
      {props.children}
    </Wrapper.Provider>
  );
  const query = () =>
    condition ? 1 : 2;

  const context = {
    // ... other properties
    query: query(),  // The reactive variable 'query' should be used within JSX, a tracked                         scope (like createEffect), or inside an event handler function.
  };

  return (
    <Wrapper.Provider value={context}>
      {props.children}
    </Wrapper.Provider>
  );
4 Replies
deluksic
deluksic•2y ago
simply pass the signal (function) instead of the resolved value!
Tommypop
Tommypop•2y ago
If you'd rather access with .query instead of .query(), you can write it as a getter:
const context = {
    get query(){
      return query();
    }
  };
const context = {
    get query(){
      return query();
    }
  };
deluksic
deluksic•2y ago
also, if your computation is complex, consider using createMemo
Ladvace
LadvaceOP•2y ago
thanks!

Did you find this page helpful?