access form within child components

hi,

I am currently trying to migrate from

react-hook-form

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);
        },
    });

    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

currentStep

state

    const steps: Step[] = [
        {
            title: "Custom bot setup guide",
            Component: CustomBotFlowStepOne,
        },

    const steps: Step[] = [
        {
            title: "Custom bot setup guide",
            Component: CustomBotFlowStepOne,
        },

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

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

In react hook form, I used to use

useFormContext

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?

access form within child components

hi,

I am currently trying to migrate from

react-hook-form

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);
        },
    });

    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

currentStep

state

    const steps: Step[] = [
        {
            title: "Custom bot setup guide",
            Component: CustomBotFlowStepOne,
        },

    const steps: Step[] = [
        {
            title: "Custom bot setup guide",
            Component: CustomBotFlowStepOne,
        },

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

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

In react hook form, I used to use

useFormContext

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?

access form within child components

access form within child components

Similar Threads