← Home

Solid - useContext

@date=2023-08-21
@tags=solidjs

I created a context system in SolidJS for forms

export const FormContext = createContext<Form>();

export interface Form {
  data: any;
  set: (data: any) => void;
  validationResult: Accessor<Joi.ValidationResult<any> | undefined>;
  touched: Accessor<TouchedData>;
  setFieldValue: (field: string, value: string) => void;
  inputChangeHandler: (name: string) => (e: Event) => void;
}
/* snip */
export default function FormContextProvider(props: FormContextProviderProps) {
    /* set all of the form variable to apply to the context */

    return (
        <FormContext.Provider value={form}>
          <form use:formDecorator>{children}</form>
        </FormContext.Provider>
    )

And in an input under that, I do:

const form = useContext(FormContext);

and the form value seems to be stuck at undefined. :(

More details here: https://stackoverflow.com/questions/76947570/solidjs-context-not-passing-down-to-children