T
TanStack•4mo ago
distinguished-blush

form.AppField -children-typeerror

<form.AppField
              name="firstName"
              children={(field) => <field.TextField label="First Name" />}
            />
<form.AppField
              name="firstName"
              children={(field) => <field.TextField label="First Name" />}
            />
Is it possible to call <TextField field={field} /> directly instead of using form.AppField with a children function like (field) => <field.TextField />? Can I pass the field value inside the children in another way?
2 Replies
optimistic-gold
optimistic-gold•4mo ago
You have four options 1. useFieldContext This is the intended way to access field values inside field components. 2. Context Since it internally uses a context, you don't need to prefix it with field. This is valid React code: 
import { TextField } from "your-components";

<form.AppField name="firstName" children={() => <TextField label="First Name"/>} />
import { TextField } from "your-components";

<form.AppField name="firstName" children={() => <TextField label="First Name"/>} />
3. Pass as prop Less useful for form composition, but you can still pass values through props like so: 
<form.AppField 
  name="firstName" 
  children={
    (field) => <TextField label="First Name" value={field.state.value}/>
  } 
/>
<form.AppField 
  name="firstName" 
  children={
    (field) => <TextField label="First Name" value={field.state.value}/>
  } 
/>
4. Typing If you want to restrain the typing (from string to 'a' | 'b'), you can add it through the following structure Do not use this value inside the actual field component. This is for typing only. Use Option 1 instead. 
interface TextFieldProps<TFieldType extends string> {
   field: {
     state: {
       value: TFieldType
     }
   }
}
interface TextFieldProps<TFieldType extends string> {
   field: {
     state: {
       value: TFieldType
     }
   }
}
optimistic-gold
optimistic-gold•4mo ago
as for passing it as component directly, see this github issue: https://github.com/TanStack/form/issues/1467
GitHub
React, make children of form.AppField optionally a ReactNode instea...
Straight to the code (React): <form.AppField name="name"> {(field) => <field.TextField label="Name" />} </form.AppField> vs <form.AppField name="ema...

Did you find this page helpful?