SolidJS•11mo ago

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•11mo ago

simply pass the signal (function) instead of the resolved value!

Tommypop•11mo 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•11mo ago

also, if your computation is complex, consider using createMemo

Ladvace•11mo ago

thanks!

Gaming

Programming

Reactive var in obj