1

I'm trying to get a forwardRef working with typescript, but eslint is giving me a strange ''handleNext' is missing in props validation eslint (react/prop-types)' error.

Code

import {StepProps, ValidationHandleWithSave} from '../Interfaces';

export const EsButton = forwardRef<ValidationHandleWithSave, StepProps>(function EsButton(props, ref) {
  const {handleNext} = props;

  return (
    <>
      {/* CONTENT OMITTED */}
    </>
  );
});

Interfaces

export interface StepProps {
  handleNext?: () => void;
}

export interface ValidationHandleWithSave {
  saveChanges: () => void;
  validate: () => Promise<boolean>;
}

With the above code I get the error ''handleNext' is missing in props validation eslint (react/prop-types)' but strangely the intelligence is giving the type correctly. The handleNext function is needed to let the parent component know the use wants to go to the next page (wizard flow). If you run this code it also works, so I guess the code itself is OK, but eslint is just not happy about it.

Screenshot of the error

Working example

Strange, when you place the 2 interfaces inside the component file, eslint stops complaining.

interface StepProps {
  handleNext?: () => void;
}

interface ValidationHandleWithSave {
  saveChanges: () => void;
}

export const EsButton = forwardRef<ValidationHandleWithSave, StepProps>(function EsButton(props, ref) {
  const {handleNext} = props;

  return (
    <>
      {/* CONTENT OMITTED */}
    </>
  );
});

This works, but because the interfaces are needed in multiple components, I want to place them in a separate folder.

Any idea why the first example is not working for me?

EDIT

Example with props.handleNext directly

export const EsButton = forwardRef<ValidationHandleWithSave, StepProps>(function EsButton(props, ref) {
  const func = props.handleNext;

  return (
    <>
      {/* CONTENT OMITTED */}
    </>
  );
});

Seems to still be giving the same eslint error. Also changing the function to EsButton(props: StepProps, ref) so eslint can read the type didn't help.

Reggi
  • 402
  • 8
  • 21
  • the destructuring you are doing here is basically causing this. Try and use props.handleNext() directly. Here are a few links that discuss the same issue: https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation , https://github.com/yannickcr/eslint-plugin-react/issues/498#issuecomment-876319112 – Mujeeb Qureshi Mar 31 '22 at 12:29
  • I checked it with calling props.handlNext() directly but didn't seem to help. Added example of what I tested so far. Does it maybe have something to do with placing the interfaces in a different file? – Reggi Mar 31 '22 at 13:30

0 Answers0