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? https://stackoverflow.com/questions/23314806/setting-default-value-for-typescript-object-passed-as-argument — Sergiu Paraschiv, Jul 25 '17 at 08: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, Jul 25 '17 at 10:21

Daniel Andrei · Answer 1 · 2017-07-25T09:04:44.903

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 '17 at 09:04

answered Jul 25 '17 at 08:37

Daniel Andrei

2,654
15
16

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 Jul 25 '17 at 10:25
Ok, apparently it has to do with react_on_rails that we use for server side rendering. – Inga Vaiciakauskaite Aug 03 '17 at 08:50

score 0 · Accepted Answer · answered Aug 03 '17 at 08:52

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 03 '17 at 08:52

Inga Vaiciakauskaite

1
2

Setting defaultProps on functional component in React

2 Answers2