evident-indigo

how to get object props in withForm(with type safetey)

I am trying to split my code. So I have a product variants array. And each variant contain options array. So in OptionList component I am trying to get variantField as a props. But it's giving type issue. How can I overcame it? Thank You

7 Replies

absent-sapphire•5w ago

with the same form options, you should pass all the parameters to access your specific variant. In this case, it sounds like two indeces: one index determines which variant another index determines which option

evident-indigoOP•5w ago

actually it's about type issue

evident-indigoOP•5w ago

this is proper type

absent-sapphire•5w ago

You're not intended to pass fields around like that. You can read up on why in the Philosophy page. As for actually implementing this, you have a button that deletes something, yet the affected component is the one above yours. The React way to go about it would be to use an event instead:

interface OptionListProps {
  index: number;
  onDeleteVariant: () => void;
}
const OptionList = withForm({
  ...createProductFormOpt,
  props: {} as OptionListProps,
  render: function Render({ form, index, onDeleteVariant }) => {
    // This component should handle deleting options.
    // Use `onDeleteVariant` to inform the parent about deleting variants
    // ...
    <Button onClick={onDeleteVariant}></Button>
  }
})

// Your variant component

<form.AppField name="variants" mode="array">
   {variantField => variantField.state.value.map((variant, index) => {
      function handleDeleteVariant() {
         if (variantField.state.value.length > 0) {
           variantField.removeValue(variantField.state.value.length - 1)
         }
      }

      return <OptionList key={index} form={form} index={index} onDeleteVariant={handleDeleteVariant} />
   })}
</form.AppField>

interface OptionListProps {
  index: number;
  onDeleteVariant: () => void;
}
const OptionList = withForm({
  ...createProductFormOpt,
  props: {} as OptionListProps,
  render: function Render({ form, index, onDeleteVariant }) => {
    // This component should handle deleting options.
    // Use `onDeleteVariant` to inform the parent about deleting variants
    // ...
    <Button onClick={onDeleteVariant}></Button>
  }
})

// Your variant component

<form.AppField name="variants" mode="array">
   {variantField => variantField.state.value.map((variant, index) => {
      function handleDeleteVariant() {
         if (variantField.state.value.length > 0) {
           variantField.removeValue(variantField.state.value.length - 1)
         }
      }

      return <OptionList key={index} form={form} index={index} onDeleteVariant={handleDeleteVariant} />
   })}
</form.AppField>

Philosophy | TanStack Form Docs

Every well-established project should have a philosophy that guides its development. Without a core philosophy, development can languish in endless decision-making and have weaker APIs as a result. Th...

evident-indigoOP•5w ago

Got it. Thanks for your support. ❤️

dependent-tan•3w ago

is props: {} as OptionListProps, good practice?

absent-sapphire•3w ago

props yes, defaultValues no

Gaming

Programming

how to get object props in withForm(with type safetey)

Did you find this page helpful?