SolidJSS
SolidJS•3y ago•
1 reply
lars

Losing reactivity in props passed to `children` callback

I've got a component Field that passes a memo to props.children. I'm running into an issue where the child component is not updating on changes to the memo

export function Field(props: { form: Form; children: JSXElement }) { // `Form` is a SolidJS store
  const fieldState = createMemo(() => {
    return {
      value: store.value,
      isDisabled: store.isDisabled,
      isRequired: store.isRequired,
      hasError: store.hasError,
    };
  });

  createEffect(() => console.log('Changed', fieldState()); // Is logging successfully on changes

  return props.children(fieldState());
}

// ---------------------------
<Field form={myForm}>
  {(fieldState) => (
    <>
      <p>{JSON.stringify(fieldState)}</p> // !! Not updating on changes
      <CustomInput {...fieldState} /> 
    </>
  )}
</Field>


It works totally fine if I instead have several memos though:

export function Field(props: { form: Form; children: JSXElement }) {
  const fieldState = {
    value: createMemo(() => store.value),
    isDisabled: createMemo(() => store.isDisabled),
    ...
  };

  return props.children(fieldState);
}

// ---------------------------
<Field form={myForm}>
  {(fieldState) => (
    <>
      <p>{JSON.stringify(fieldState)}</p> // Updating correctly now
      <CustomInput value={fieldState.value()} isDisabled={fieldState.isDisabled()} ... /> 
    </>
  )}
</Field>


a downside with the working example is having to pass in all props explicitly instead of just spreading em (ie. {...fieldState}) 😬

how come the reactivity is lost? is there a way to preserve reactivity + still being able to spread the props?
Was this page helpful?