Stateless Component: React.forwardRef make defaultProps invalid #16653

Activity

1. threepointone commented on Sep 4, 2019

   

   threepointone

   on Sep 4, 2019

   Contributor

   More actions

   Could you please use codesandbox.io to make a reproducing example? Or a git repo I can try locally (but preferred codesandbox). Thanks!
2. threepointone

   added

   Resolution: Needs More Information

   on Sep 4, 2019
3. bvaughn

   closed this as completedon Oct 3, 2019
4. bvaughn commented on Oct 3, 2019

   

   bvaughn

   on Oct 3, 2019

   Contributor

   More actions

   Closing because this issue has insufficient info.
5. PaulRBerg commented on Nov 21, 2019

   

   PaulRBerg

   on Nov 21, 2019

   Last edited by PaulRBerg

   More actions

   Here's a CodeSandbox that reproduces the issue.

   It seems that eslint-plugin-react throws this error:

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

   But it's confusing, since removing the propTypes (in my IDE not on CodeSandbox), gets me the "is missing in props validation" warning.
6. bvaughn commented on Nov 22, 2019

   

   bvaughn

   on Nov 22, 2019

   Contributor

   More actions

   Ah, I see why there's confusion here. 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?
7. ronen commented on Dec 11, 2019

   

   ronen

   on Dec 11, 2019

   Last edited by ronen

   More actions

   I just hit on this too. In case anyone else comes across this thread and needs some extra hand-holding (I was still a bit befuddled and it took me a bit to understand):

   The function passed to forwardRef is not a React component.

   ...but the function returned by forwardRef is effectively a React component. So that's where the propTypes and defaultProps would go. It also needs a displayName. I.e.:

   const MyComponent = React.forwardRef((props, ref) => { 
      ...
   })
   
   MyComponent.displayName = 'MyComponent'
   
   MyComponent.propTypes = {
      name: PropTypes.string,
   }
   
   MyComponent.defaultProps = {
     name: 'default Name',
   }
   

   👍React with 👍67Reacted by cpham-rb, rakaQerja, Luke Bettridge, Florian Burgevin, Chris Manley, Andrew Sologor, KyrieChen, Onur Önder, jweboy, huannn1 and 57 more

   👎React with 👎2Reacted by Jafar Jabr and Wade Fletcher

   🎉React with 🎉20Reacted by rakaQerja, Andrew Harris, ryanmk54, A-J Roos, Cory Robinson, Seva Pechenin, Clément Champouillon, Allen Ai, thucltzigvy, Higi and 10 more

   😕React with 😕4Reacted by AARAB MOHAMMED, Trigger, Derek Lin and discretegames

   👀React with 👀3Reacted by Princekesh, Miguel Amatón and Nyamkhuu.B
8. Merkur39

   added 2 commits that reference this issue on May 6, 2022

   fix(IconButton): Implementation of forwardRef

   ...

   0759b32

   fix(IconButton): Implementation of forwardRef

   ...

   a6405ba
9. nhuthan commented on Mar 8, 2024

   

   nhuthan

   on Mar 8, 2024

   More actions

   I just hit on this too. In case anyone else comes across this thread and needs some extra hand-holding (I was still a bit befuddled and it took me a bit to understand):

   The function passed to forwardRef is not a React component.

   ...but the function returned by forwardRef is effectively a React component. So that's where the propTypes and defaultProps would go. It also needs a displayName. I.e.:

   const MyComponent = React.forwardRef((props, ref) => { 
      ...
   })
   
   MyComponent.displayName = 'MyComponent'
   
   MyComponent.propTypes = {
      name: PropTypes.string,
   }
   
   MyComponent.defaultProps = {
     name: 'default Name',
   }
   

   It doesn't work for react 18

   👍React with 👍3Reacted by Andrew Gray, lucas-kenji-desco and robertoaceves