React-final-form: Type 'FunctionComponent<IProps>' is not assignable to type '"input" | "select" | "textarea" | ComponentClass<FieldRenderProps<string, HTMLElement>, any> | FunctionComponent<FieldRenderProps<string, HTMLElement>> | undefined'

[jags212]

[streetwiseherc]

I see you're going through the "Reactivities" Udemy course by @TryCatchLearn also!? :)

If you're looking for a temporary workaround to get past this and continue with the course, you can uninstall the "react-final-form" package and install the specific version that Neil used when he created the course.

cd client-app
npm uninstall react-final-form
npm install [email protected]

That seemed to work for me.

Note: Version 6.3.0 is about 6 months old, and version 6.3.1+ was released in the last 16 days.

[streetwiseherc]

Another option, if you want to keep up with the latest version (6.3.3) is to change HTMLInputElement to any in the following code:

interface IProps
  extends FieldRenderProps<string, HTMLInputElement>,
    FormFieldProps {}

const TextInput: React.FC<IProps> = ({  /* blah blah blah */

I got this idea from the code samples/documentation that can be found here: https://codesandbox.io/s/strongly-typed-form-values-with-react-final-form-26jkd

I can't comment on what has changed over the last 6 months, but I'm going to stick with version 6.3.0 which is the version the Udemy course was authored with. Generally, in today's world where things change quickly, it's best to use the package/library version numbers used when the course/book/post was authored.

[jags212]

Thank you @streetwiseherc

[nboltn]

wait why is this closed? I'm getting this same issue and prefer not to downgrade.

[jags212]

@nboltn But downgrading the package did the trick.

[nboltn]

but the underlying issue has not been solved, this should remain open until then. downgrading is only a hot-fix. as street said, that version is over six months old.

[jags212]

May be you check with the below code sandbox Url for work-around :

https://codesandbox.io/s/strongly-typed-form-values-with-react-final-form-26jkd

Let me know if it helps.

[Premashanth]

I see you're going through the "Reactivities" Udemy course by @TryCatchLearn also!? :)

If you're looking for a temporary workaround to get past this and continue with the course, you can uninstall the "react-final-form" package and install the specific version that Neil used when he created the course.

cd client-app
npm uninstall react-final-form
npm install [email protected]

That seemed to work for me.

Note: Version 6.3.0 is about 6 months old, and version 6.3.1+ was released in the last 16 days.

Thanks buddy

[wesbw]

To solve this issue without downgrade;
in TextInput.tsx instead of using HTMLInputElement I used HTMLElement

interface IProps extends FieldRenderProps

[medlotf]

@wesbw replacing with HTMLElement will result an other error related to meta (in this exemple)

[sinalias]

To solve this issue without downgrade;
in TextInput.tsx instead of using HTMLInputElement I used HTMLElement

interface IProps extends FieldRenderProps

This works fine for me. I haven't any problem with the meta parameter that medlotf said.

[ghotir]

When you get to the DateInput there is another error, that downgrading didn't solve.

The expected type comes from property 'component' which is declared here on type 'IntrinsicAttributes & FieldProps'

I can change
extends FieldRenderProps,

back to string, but that removes all the date stuff that it had going on.

[klodvik]

For the Date input one of the solutions is to specify the type of a value on the Final Form Field like:

<Field<Date>
name='date'
placeholder='Date'
value={activity.date}
component={DateInput}
/>

Hopefully this helps someone!

[EricZX26]

1. Replace HTMLInputElement with HTMLElement in any FieldRenderProps<,>
2. Remove ...rest and { ...rest} in DateInput component

[kyon12345]

For the Date input one of the solutions is to specify the type of a value on the Final Form Field like:

<Field<Date>
name='date'
placeholder='Date'
value={activity.date}
component={DateInput}
/>

Hopefully this helps someone!

try to use FieldRenderProps or FieldRenderProps
in your child component

[jags212]

Recently i did a npm update and i see the attached compilation Issue coming up.

[Dariel90]

@jags212 Have you any answer to this?

[jags212]

@jags212 Have you any answer to this?

I did re-install the previous version to resolve the issue.

[manjujeewa]

Another option, if you want to keep up with the latest version (6.3.3) is to change HTMLInputElement to any in the following code:

interface IProps
  extends FieldRenderProps<string, HTMLInputElement>,
    FormFieldProps {}

const TextInput: React.FC<IProps> = ({  /* blah blah blah */

I got this idea from the code samples/documentation that can be found here: https://codesandbox.io/s/strongly-typed-form-values-with-react-final-form-26jkd

I can't comment on what has changed over the last 6 months, but I'm going to stick with version 6.3.0 which is the version the Udemy course was authored with. Generally, in today's world where things change quickly, it's best to use the package/library version numbers used when the course/book/post was authored.

This solution worked for me. Thanks

[deltics]

For the Date input one of the solutions is to specify the type of a value on the Final Form Field like:

<Field<Date>
name='date'
placeholder='Date'
value={activity.date}
component={DateInput}
/>

Hopefully this helps someone!

Thank You! Even using the exact versions of semantic-ui and final-form as specified in the course was not helping me until THIS refinement!!

[deltics]

Ok, reverting to the specific versions used in the course created a host of further problems for me, so I went back to using the latest versions of everything and trying to solve each problem properly.

So, using [email protected] and [email protected], this is what I came up with:

On all the form components, removed the 2nd type param from the IProps declarations:

interface IProps
    extends FieldRenderProps<string>, FormFieldProps {
};

and for the DatePicker:

interface IProps
    extends FieldRenderProps<Date>, FormFieldProps {
};

No other changes were needed on the input components other than on the DatePicker. In this case the id property had to be restructured explicitly (not as part of the ...rest spread):

const DateTimeInput: React.FC<IProps> = ({
                                         input,
                                         width,
                                         placeholder,
                                         meta: {
                                             touched,
                                             error
                                         },
                                         id,
                                         ...rest
                                     }) =>

which then is converted to the required string value as part of the DateTimePicker element props:

        <DateTimePicker id={id ? id.toString() : ''}
                        placeholder={placeholder}
                        value={input.value}
                        onChange={input.onChange}
                        {...rest}/>

Then finally, in the ActivityForm, provide the value type param on the Field element, as suggested by @kyon12345:

                                   <Field<Date> component={DateTimeInput}
                                          placeholder='Date'
                                          name='date'
                                          value={activity.date!}/>

Then after fixing all the date typing and formatting, the app once more ran without any console vomit! (apart from some componentDidMount and componentWillReceiveProps warnings originating from the DateTimePicker and Calendar).

I hope this helps some people.

[freadam]

Any updates?

[milyas19]

@streetwiseherc I had a feeling that the newer version of react-final-form will not work and it didn't work. Thank you for sharing the solution and command. Cheers 👍