TanStackT
TanStack•5w ago•
2 replies
then-purple

access form within child components

hi,

I am currently trying to migrate from react-hook-form to tanstack form, but i am a little confused about how I should be accessing the form object in child components?


I have the following form, which is used in a popup multi step form. 
    const form = useAppForm({
        defaultValues: {
            botToken: "",
            botId: "",
            userConfirmedRedirectUrisCorrect: false,
            confirmedWillReadDocs: false,
            guildId: "",
        },
        validators: {
            onChange: verifyBotTokenSchema,
        },
        onSubmit: async ({ value }) => {
            await handleSubmit(value.input);
        },
    });

I have an array of steps, which get moved through depending on the users currentStep state
    const steps: Step[] = [
        {
            title: "Custom bot setup guide",
            Component: CustomBotFlowStepOne,
        },

<form.AppForm>
                    <Component
                        onNext={goNext}
                        onBack={goBack}
                        totalSteps={steps.length}
                        currentStep={currentStep}
                    />
</form.AppForm>



In react hook form, I used to use useFormContext, but this doesnt seem to be the approach that tanstack uses? If I am to pass the form object as a prop, im not sure how i am supposed to correctly type this?
Was this page helpful?