final-form / final-form/react-final-form-arrays

Type 'FieldArrayRenderProps<any>' is missing the following properties from type 'ActionFormItemsProps': values

Open
#102 4 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.