form.AppField -children-typeerror

[glossy totem]

              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?

[spice pike]

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"/>} />

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}/>
  } 
/>

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
     }
   }
}