React typescript forwardref with defaultProps

Question

I was trying to use defaultProps in functional component along with forwardRef, but was getting the error (refer screenshot).

I don't want to destructure the props in function params and assign default value. because got a lot of props in my original usecase. I also tried assigning the default values JSON directly to ComponentA.defaultProps still same result. How to resolve this ? Tried surfing but was not able to find any solution. Also since we are using TS for type check, do we still need prototype JSON ? #App.tsx

import './App.css';
import ComponentA from './components/A/A';
function App() {
  return (
    <div className="App">
      <ComponentA>
        <button>Button I am</button>
      </ComponentA>
    </div>
  );
}

export default App;

#ComponentA.tsx

import React,{forwardRef} from "react"
import PropTypes from 'prop-types';

type Props =  {
    children:JSX.Element | JSX.Element[],
    text:string,
    text1?:string,
} 

const ComponentA=(prop:Props)=>{
    return <div>Hey
        {prop.children}
        {prop.text}
        {prop.text1}
    </div>
}
ComponentA.prototype = {
    children:PropTypes.element.isRequired,
    text:PropTypes.string.isRequired,
    text1:PropTypes.string
}

ComponentA.defaultProps={
    text: 'done'
} as Partial<Props>
export default forwardRef<HTMLAllCollection,Props>(ComponentA)

Thanks

can you share the code snippet?

Yedidya Rashi
– Yedidya Rashi

2022-10-21 13:41:46 +00:00
Commented Oct 21, 2022 at 13:41 — Yedidya Rashi
– Yedidya Rashi, Commented Oct 21, 2022 at 13:41
@YedidyaRashi updated the post with snippet

tadain
– tadain

2022-10-21 13:46:08 +00:00
Commented Oct 21, 2022 at 13:46 — tadain
– tadain, Commented Oct 21, 2022 at 13:46

Yedidya Rashi · Accepted Answer · 2022-10-21 15:35:44Z

3

Brian Vaughn commmented on the issue of Stateless Component: React.forwardRef make defaultProps invalid

The function passed to forwardRef is not a React component. (React components don't accept a second ref param for example.) It's just a function that "renders" (returns) React elements. So it does not support defaultProps. We have tests that confirm this as expected behavior.

React also logs the following error in the console (as can be seen in your Code Sandbox repro):

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

That is the reason why you can not attach defaultProps before passing the function that "renders" to the forwordRef.

It's also mentioned in the type definitions of react:

// the input of ForwardedRef
interface ForwardRefRenderFunction<T, P = {}> {
    (props: P, ref: ForwardedRef<T>): ReactElement | null;
    displayName?: string | undefined;
    // explicit rejected with `never` required due to
    // https://github.com/microsoft/TypeScript/issues/36826
    /**
     * defaultProps are not supported on render functions
     */
    defaultProps?: never | undefined;
    /**
     * propTypes are not supported on render functions
     */
    propTypes?: never | undefined;
}

In your case just inverse the order of declarations:

import "./styles.css";
import { forwardRef } from "react";
import PropTypes from "prop-types";

type Props = {
  children: JSX.Element | JSX.Element[];
  // NOTE: text is optional since he has default value.
  text?: string;
  text1?: string;
};

const ComponentA = forwardRef<HTMLAllCollection, Props>((prop: Props) => {
  return (
    <div>
      Hey
      {prop.children}
      {prop.text}
      {prop.text1}
    </div>
  );
});

ComponentA.prototype = {
  children: PropTypes.element.isRequired,
  text: PropTypes.string,
  text1: PropTypes.string
};

ComponentA.defaultProps = {
  text: "done"
};

export default function App() {
  return (
    <ComponentA>
      <button>Button I am</button>
    </ComponentA>
  );
}

Sandbox Code

edited Oct 21, 2022 at 15:35

answered Oct 21, 2022 at 14:25

Yedidya Rashi

1,0929 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tadain Over a year ago

tried your solution, working fine. Still I am not able to understand why it behaves diff when we wrap forwardRef while exporting vs using forwardRef while declaring.

Yedidya Rashi Over a year ago

does it clearer now?

tadain Over a year ago

thanks for the detailed info, now able to wrap my head around this.

Collectives™ on Stack Overflow

React typescript forwardref with defaultProps

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related