flat-fuchsia

Passing prop to withFieldGroup.

Is there way to pass dynamic props to withFieldGroup, not static ones from props key but to the component itself. Something like: <MyFieldGroup isDisabled={...} />

16 Replies

foreign-sapphire•4w ago

static ones from props key? props is used for type inference to tell React what props it expects. Neither its keys nor values are actually passed to the render function if you want to have full control over the type of props, an assertion is safe so doing props: {} as YourPropsInterfaceOrType

flat-fuchsiaOP•4w ago

How can i then acces them? In render finction? How does the signature look like?

foreign-sapphire•4w ago

yes, the render function accepts props which is the props you specified intersected with

{ children?: ReactNode; form: ReactExtendedFormApi<...> }

{ children?: ReactNode; form: ReactExtendedFormApi<...> }

flat-fuchsiaOP•4w ago

Thank you. May i have one more question? In docs there is string used for 'fields' prop of resulting component but I get type error with string not being assignable and expecting what i guess is a mapping object.

foreign-sapphire•4w ago

it's because it couldn't resolve it. fields from a field group is resolved in one of two ways: * pass a string (deep key of form data) that resolves to the expected object. * pass an object that maps the expected fields to a deep key of form data So that means:

// Just stub data types so I can explain.
type FormData = {
  foo: string;
  nested: {
     foo: string;
     bar: string;
     deeperNested: {
        foobar: number;
     }
  }
}

type FieldGroupData = {
  foo: string;
  bar: string;
  deeperNested: {
     foobar: number;
  }
}

// Possible because nested is resolvable to FieldGroupData
<FieldGroup form={form} fields="nested" />

// Possible because each key has a value it expects
<FieldGroup form={form} fields={{
   foo: 'foo', // also possible: 'nested.foo'
   bar: 'nested.bar',
   deeperNested: 'nested.deeperNested'
}} />

// Just stub data types so I can explain.
type FormData = {
  foo: string;
  nested: {
     foo: string;
     bar: string;
     deeperNested: {
        foobar: number;
     }
  }
}

type FieldGroupData = {
  foo: string;
  bar: string;
  deeperNested: {
     foobar: number;
  }
}

// Possible because nested is resolvable to FieldGroupData
<FieldGroup form={form} fields="nested" />

// Possible because each key has a value it expects
<FieldGroup form={form} fields={{
   foo: 'foo', // also possible: 'nested.foo'
   bar: 'nested.bar',
   deeperNested: 'nested.deeperNested'
}} />

So the string is simply a shortcut to not have to define many fields.

fields="nested"
// ===
fields={{ foo: 'nested.foo', bar: 'nested.bar' }}

fields="nested"
// ===
fields={{ foo: 'nested.foo', bar: 'nested.bar' }}

flat-fuchsiaOP•4w ago

I thought it works like prefix for the data that are collected from FieldGroup. From what is data shape inferred? From default values? I have 2 values firstName, lastName in root. Is there way to specify that it should look at the root?

foreign-sapphire•4w ago

the data shape for field groups is inferred from defaultValues there's no direct way to assign root values, but you can create a map ahead of time using createFieldMap which would give you { firstName: 'firstName', lastName: 'lastName' }

flat-fuchsiaOP•4w ago

Is it inferred from form default values or fieldGroup default values?

foreign-sapphire•4w ago

the keys are inferred from fieldGroup default values, the available values are inferred from form default values so

{
 [K in keyof FieldGroupData]: DeepKeysOfType<FormData, FieldGroupData[K]>
}

{
 [K in keyof FieldGroupData]: DeepKeysOfType<FormData, FieldGroupData[K]>
}

flat-fuchsiaOP•4w ago

Got it. Thanks for your time. You really helped me a lot.

foreign-sapphire•4w ago

let me know if you have more questions :PepeThumbs:

flat-fuchsiaOP•4w ago

@Luca | LeCarbonator I got one more question: In one of my field groups i have logic that changes visible fields based on type of one of them, lets say i have vehicle type and based on what kinds it is i want to show different fields in that group. What is correct way to do it? I have my groups in separate files, exporting default values and combining them in my form default values. Do i need to have all values (for all kinds of vehicle) defined and filtered in submit or can I somehow just use the slice i need? What is best way to compose the switching? I would like to keep logic in group render function using store but i cannot use hooks to reset fields inside it. Is it better idea to have logic on form level and split it into different fieldgroups?

foreign-sapphire•4w ago

but I cannot use hooks to reset fields inside it

Can you elaborate? What would the logic inside the group look like?

flat-fuchsiaOP•4w ago

UseStore on my vehicle type and watch it in useeffect to reset values to defaults then conditionaly render part based on vehicle type

foreign-sapphire•4w ago

is there no group.resetField for this? that's an easy port, so if it's not present, it can be easily implemented

flat-fuchsiaOP•4w ago

There is but how to do it on change of type? Also what about values/default values Ok, group.Subsribe was the way

Gaming

Programming

Passing prop to withFieldGroup.

Did you find this page helpful?