Setting defaultProps on functional component in React

Question

I have a bunch of functional react UI components. I want to set defaultProps to those components. However, it seems that my components do not apply those default props. Here is an example code:

// @flow
import React from 'react'
import classNames from 'classnames/bind'

type LabelType = 'default' | 'narrow' | 'wide'

const Label = (
  props: {
    text: string,
    type: LabelType,
  }
) => {
  const { text, type } = props
  const labelClass = classNames(
    'c-label',
    `c-label--${type}`
  )

  return (
    <div className={labelClass}>
      {text}
    </div>
  )
}

Label.defaultProps = {
  type: 'narrow',
}

export default Label

The result that I get is CSS class c-label--undefined. If I pass default values during object destructuring, const { type = 'narrow' } it works fine. The above code works also when I convert functional component to a class-based component.

I have researched this issue a lot but I haven't been able to find a solution. Of course, I could pass the default values during destructuring but it is harder to read and my company would like to adopt the pattern that I have described. I've seen some articles describing that it is possible to pass defaultProps to functional components but perhaps that has changed? I would appreciate any suggestions.

Did you read the answers here? stackoverflow.com/questions/23314806/… — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Jul 25, 2017 at 8:23
I cannot see how it is a possible duplicate. They are not trying to set default values the way I do and it is TypeScript — Inga Vaiciakauskaite
– Inga Vaiciakauskaite, Commented Jul 25, 2017 at 10:21

Daniel Andrei · Accepted Answer · 2017-07-25 09:04:44Z

1

I'm pretty sure your code should work. Just checked it out on my own. type has the default value if not passed as a prop. Maybe the issue is from where you're using the component?

edited Jul 25, 2017 at 9:04

answered Jul 25, 2017 at 8:37

Daniel Andrei

2,70417 silver badges16 bronze badges

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

2 Comments

Inga Vaiciakauskaite Over a year ago

Very interesting. The application I am working on is rendered from the server (RoR). As we are migrating from backbone to react, we initiate our components in erb templates. That could be a problem, I guess

Inga Vaiciakauskaite Over a year ago

Ok, apparently it has to do with react_on_rails that we use for server side rendering.

Inga Vaiciakauskaite · Accepted Answer · 2017-08-03 08:52:34Z

0

OK, so after some research it appears that defaultProps do not work in this setting because of react on rails. We use that for server side rendering. Hopefully this will be helpful to those who might be in a similar situation

answered Aug 3, 2017 at 8:52

Inga Vaiciakauskaite

13 bronze badges

Collectives™ on Stack Overflow

Setting defaultProps on functional component in React

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related