← Home

Solid - useContext


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>

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