Understanding "PropType is defined but prop is not never used" + Formik

[javierguzman]

Hello all!

I am making a Formik form and ESLint was complaining about some props missing validation. Then, I added propTypes and defaults and I got the error "PropType is defined but prop is never used".

I believe this error is due to the fact that when I place MyComponent.propTypes blabla I was assigning props to my functional components. However, ESLint complains about the props passed to the render prop function. An example of such props are errors and touched from the function ValidationSchemaExample on https://jaredpalmer.com/formik/docs/guides/validation

In my personal code I had something like this:

  const renderResetPasswordRequestForm = ({ errors, touched, handleSubmit } ) => {
    return (
      <form onSubmit={handleSubmit}>
      </form>
    );
  };

Which was triggering the error, however, with the below code it does not happen:

const renderResetPasswordRequestForm = formikProps => {
    const { errors, touched, handleSubmit } = formikProps;
    return (
      <form onSubmit={handleSubmit}>
      </form>
    );
  };

So the key question:
Anyone understand why if I destructure the parameters it complains and if I do so in the body of the function ESLint does not complain?

Thank you in advance and regards.

[ljharb]

The linter recognizes a function that returns JSX as a component. This runs into trouble with render props, however. I'd also expect it to error, or not error, on both.

What happens if you inline the render prop into the jsx where it's used?

[javierguzman]

Hello Jordan!

Thank you for the quick response. It would be interesting to understand why it runs into trouble, at least in a very high level just for the sake of curiosity. But anyway, I can take always take a look at the code!

Regarding inlining the render prop into the jsx where it is used, what do you mean? To place the render prop function inside where the render prop function is called? Because the render prop function is called from Formik which is a third-party library. It is not like I have my own component that can accept a render prop. Does this make sense?

Again thank you.

[golopot]

The bug seems to be that the variable name must be named props:

// works
function Foo(props) {
  ...
}

// fails
// `propsss` is not recognized as props
function Goo(propsss) {
  ...
}

[javierguzman]

Thanks for the response @golopot

That is not the error sorry if it is confusing. I do not get any error when I use formikProps name and then I destructure in the function body. I get the complain when I destructure in the parameter list, e.g.
({variable1, variable2}) => {}

[ljharb]

I believe destructuring, or an arg named props, is recognized. The bug is indeed that an arg with any other name is not recognized.

[javierguzman]

Hello!

If at the end I am destructuring the arguments there is no "props" because it is destructured. I think I am creating confusion, this is how my code looks like more or less:

const MyComponent = () =>
{

  const renderResetPasswordRequestForm = formikProps => {
    const { errors, touched, handleSubmit } = formikProps;
    return (
      <form onSubmit={handleSubmit}>
        blabla
      </form>
    );
  };

  return (
    <Formik
      blabla
    >
      {formikProps => {
        return (
          <Loader isLoading={isLoading} height={500} weight={500}>
            <div className="resetPassword-container container">
              {renderResetPasswordRequestForm(formikProps)}
            </div>
          </Loader>
        );
      }}
    </Formik>
  );
};

As you can see, MyComponent does not have props, however, Formik inyects some props to the render prop function. I have tried renaming formikProps to props but still does not work. It will complain about renderResetPasswordRequestForm IF I destructure the argument list, if I leave like it is now (destructuring in the body) it does not complain.

Does this make sense?

[jzabala]

I just tested this issue with the changes in #2699 and since functions not starting with an uppercase letter are not considered components the error about props not being defined on render props it not triggered.