Using forwardRef with proptypes and eslint
You are almost done with your third attempt. But you don't have to use twice forwardRef, the first use with the Button declaration is enough. The display name rule is not an error (neither at JavaScript nor React level), but rather an intentional prop in order to show the "real" name of the component, used by React in debugging messages.In your case, the forwardRef function will hide the "real" component name for the transpiler.
You can even disable this rule if it's a real problem to write displayName for each of those case.
https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/display-name.md
const Button = forwardRef(({ action = { callback: () => {}, title: 'unknown' } }, ref) => { return (<button ref={ref} onClick={action.callback} title={action.description} type="button">{action.icon || action.title}</button>)});Button.propTypes = { action: Action.isRequired}Button.displayName = 'Button'export default Button
const Form = React.forwardRef(function Form( { submitHandler, keyUpHandler, label, type, placeholder, buttonTxt }, ref) {export default Form
No warnings doing this way. function Form takes care of the name.
interface SomeProps { // written your props};const SomeFC = forwardRef((props:SomeProps,ref)=>{// do something and returns}})Declare the type of props for inner FC can fix the proptypes warnning!