Best practice to use form.Subscribe in parent component?

I have a component which handles a form (created with useForm) and returns a <form>:

// MyForm.tsx
const form = useForm({
...
});

return (
  <form>
    <form.Field>...</form.Field>
  </form>
)

// MyForm.tsx
const form = useForm({
...
});

return (
  <form>
    <form.Field>...</form.Field>
  </form>
)

Now I want to build the parent component where I would like to subscribe to the form to dynamically render a chart based on the values in the form.

// parent.tsx
return (
  <MyForm />
  <form.Subscribe>
    {(state) => {
      const data = state.values;
      ...
    }
  </form.Subscribe>
)

// parent.tsx
return (
  <MyForm />
  <form.Subscribe>
    {(state) => {
      const data = state.values;
      ...
    }
  </form.Subscribe>
)

What is the best way to do this?

TanStack•6mo ago•

4 replies

dry-scarlet

I have a component which handles a form (created with useForm) and returns a <form>:

// MyForm.tsx
const form = useForm({
...
});

return (
  <form>
    <form.Field>...</form.Field>
  </form>
)

// MyForm.tsx
const form = useForm({
...
});

return (
  <form>
    <form.Field>...</form.Field>
  </form>
)

Now I want to build the parent component where I would like to subscribe to the form to dynamically render a chart based on the values in the form.

// parent.tsx
return (
  <MyForm />
  <form.Subscribe>
    {(state) => {
      const data = state.values;
      ...
    }
  </form.Subscribe>
)

// parent.tsx
return (
  <MyForm />
  <form.Subscribe>
    {(state) => {
      const data = state.values;
      ...
    }
  </form.Subscribe>
)

What is the best way to do this?