Pages Editor: Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

[eatyourgreens]

Expected behavior

The app should really run in development mode without this warning (but it's only a problem in development, not production.)

Current behavior

Please include any error messages from the browser console and/or screenshots

The pages editor uses propTypes on forwardRef in a couple of places, but prop types are only allowed on React components. forwardRef(function (props, ref)) doesn't take a component as an argument, so the following prop types are ignored by React.

https://github.com/zooniverse/Panoptes-Front-End/blob/b8cf174c780f7b5a242b91529115cfa7235b3742/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx#L117-L129

https://github.com/zooniverse/Panoptes-Front-End/blob/b8cf174c780f7b5a242b91529115cfa7235b3742/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx#L125-L134

forwardRef(function (props, ref)) returns a React component, so what you want to do is something like:

function MyComponentWithRef(props, ref) {
  return <SomeComponent ref={ref} {...props} />;
}

const MyComponent = forwardRef(MyComponentWithRef);
MyComponent.propTypes = {
/*
  Define your prop types here.
*/
}

export default MyComponent;

Steps to replicate

Load up the app in development mode and these warnings will show up near the top of the console.

Additional information

Noticed while I was chasing down some React development errors that broke #7114.

This will hopefully get easier in React 19, which gets rid of forwardRef.

[eatyourgreens]

Pinging @shaunanoordin.

[eatyourgreens]

I've included the fix for this in #7114 but I've put it in its own commit, so that you can git cherry-pick it out if you want to isolate the fix.