final-form / final-form/react-final-form-arrays
Type 'FieldArrayRenderProps<any>' is missing the following properties from type 'ActionFormItemsProps': values
- Dominant language
- TypeScript
- Stars
- 210
- Forks
- 69
- PR merge metrics
- No merged PRs in 30d
Description
### Are you submitting a **bug report** or a **feature request**?
Got the TS error when I use `FieldArray` with additional props
### What is the current behavior?
```
```
and
```
export interface ActionFormItemsProps {
values: ActionFormDataInterface
}
export const ActionFormItems: FC & ActionFormItemsProps> = ({fields, values}) => {
...
}
```
### What is the expected behavior?
The TS linter should handle that code properly, but it highlights on `component` prop:
```
```
### Sandbox Link
```
Error:(99, 49) TS2322: Type 'FunctionComponent & ActionFormItemsProps>' is not assignable to type 'string | ComponentClass, any> | FunctionComponent> | undefined'.
Type 'FunctionComponent & ActionFormItemsProps>' is not assignable to type 'FunctionComponent>'.
Type 'FieldArrayRenderProps' is not assignable to type 'FieldArrayRenderProps & ActionFormItemsProps'.
Type 'FieldArrayRenderProps' is missing the following properties from type 'ActionFormItemsProps': values
```
### What's your environment?
IOS
"version": "3.0.0",
### Other information
Possible solution is to update the interface definition.
So, the current implementation defines `component` as a `React.ComponentType | string`
```
export interface RenderableProps {
children?: ((props: T) => React.ReactNode) | React.ReactNode
component?: React.ComponentType | string
render?: (props: T) => React.ReactNode
}
export interface UseFieldArrayConfig extends UseFieldConfig {
isEqual?: (a: any[], b: any[]) => boolean
}
export interface FieldArrayProps
extends UseFieldArrayConfig,
RenderableProps> {
name: string
[otherProp: string]: any
}
```
but actually, we can pass extra props to the Component. So, I suggest you to extend the interface definition by:
```
interface ExtraProps {
[otherProp: string]: any
}
export interface RenderableProps {
children?: ((props: T) => React.ReactNode) | React.ReactNode
component?: React.ComponentType | string
render?: (props: T) => React.ReactNode
}
```
Contributor guide
Assessment
This issue has not been assessed yet.