T
TanStack•4mo ago
fair-rose

Adding additional props to component wrap with withForm

Hi @Luca | LeCarbonator . Currently learning the form apis. I would like to ask how would you pass additional props to a component that wraps withForm HOC. Do I need to defined that additional props in with default value? props: {} in withForm hoc? 
import { withForm } from '@/shared/hooks';

//aditional props here
type LoginFormPros = {
  name: string,
  otherFunction: () => void,
  isAdded: boolean
}

export const LoginForm = withForm({
  props: {
   // why do I need to add a default value here for additional props
   name: "",
   otherFunction: () => {},
   isAdded: false
  } as LoginFormPros,
  render: function Render({ form,isAdded, name, otherFunction }) { // before getting it here?
    return (
      <div className='flex min-h-svh w-full items-center justify-center p-6 md:p-10'>
        <div className='w-full max-w-sm'>
          <div className='flex flex-col gap-4'>
            <Card>
import { withForm } from '@/shared/hooks';

//aditional props here
type LoginFormPros = {
  name: string,
  otherFunction: () => void,
  isAdded: boolean
}

export const LoginForm = withForm({
  props: {
   // why do I need to add a default value here for additional props
   name: "",
   otherFunction: () => {},
   isAdded: false
  } as LoginFormPros,
  render: function Render({ form,isAdded, name, otherFunction }) { // before getting it here?
    return (
      <div className='flex min-h-svh w-full items-center justify-center p-6 md:p-10'>
        <div className='w-full max-w-sm'>
          <div className='flex flex-col gap-4'>
            <Card>
Is there other way to handle this without setting a default value? 
//parent component passing the form with additional prop
  return <LoginForm form={loginForm as any} name='test' otherFunction={() => {}} isAdded />;
};
//parent component passing the form with additional prop
  return <LoginForm form={loginForm as any} name='test' otherFunction={() => {}} isAdded />;
};
1 Reply
quickest-silver
quickest-silver•4mo ago
since default values from props aren‘t used (and sunce LoginFormProps is a type instead of an interface), you can simply do {} as LoginFormProps

Did you find this page helpful?