False negative of prop-types with stateless components

[kossnocorp]

When a stateless component is created as a property of an object, prop-types gives false negative:

🚫 reports "'children' is missing in props validation":

Panel.Body = ({children}) => (
  <div className='Panel-body'>
    {children}
  </div>
)

Panel.Body.propTypes = {
  children: PropTypes.node
}

👌🏽 works fine:

const Body = ({children}) => (
  <div className='Panel-body'>
    {children}
  </div>
)

Body.propTypes = {
  children: PropTypes.node
}

Panel.Body = Body

[kentcdodds]

Another example:

🚫 reports error:

function Foo({bar}) {
  return <div>{bar}</div>
}

Foo.propTypes = {
  bar: PropTypes.string.isRequired
}

Passes:

Foo.propTypes = {
  bar: PropTypes.string.isRequired
}

function Foo({bar}) {
  return <div>{bar}</div>
}

[yannickcr]

@kossnocorp How is created your Panel object ? To match the propTypes with Panel.Body we're searching for the Panel variable in the current scope but in your example Panel is never declared so we cannot makes the match.

This code is working:

var Panel = {}; // <= Declare Panel
Panel.Body = ({children}) => (
  <div className='Panel-body'>
    {children}
  </div>
)

Panel.Body.propTypes = {
  children: PropTypes.node
}

@kentcdodds What version of eslint and eslint-plugin-react are you using? Your first example is working for me with eslint-plugin-react v6.1.2

[kossnocorp]

@yannickcr the Panel is declared as a class exported by default; maybe this is the problem. However, it's valid ES200X and supposed to be working 😇

I have errors:

... on such code:

import React, {PropTypes, Component} from 'react'
import classNames from 'classnames'

export default class Panel extends Component {
  static propTypes = {
    children: PropTypes.node,
    color: PropTypes.oneOf(['green', 'red', 'orange', 'grey', 'blue'])
  }

  render () {
    const {color, children} = this.props
    const panelClasses = classNames('Panel', {
      [`is-${color}`]: color,
      'has-color': color
    })
    return (
      <section className={panelClasses}>
        {children}
      </section>
    )
  }
}

Panel.Header = ({children}) => (
  <header className='Panel-header'>
    {children}
  </header>
)

Panel.Header.propTypes = {
  children: PropTypes.node
}

Panel.Body = ({children}) => (
  <div className='Panel-body'>
    {children}
  </div>
)

Panel.Body.propTypes = {
  children: PropTypes.node
}

The version is eslint-plugin-react@6.1.2.

Thank you a lot for great work!

[kossnocorp]

@kentcdodds I just tried your code and I don't have the error:

You could try to upgrade I suppose, I had 5.x before upgrade and the current one is eslint-plugin-react@6.1.2.

[yannickcr]

the Panel is declared as a class

Ok, seems the issue comes from here. I'll have a look.

[kentcdodds]

Huh, it looks like my issue is possibly related but I'm not sure what's going on... Here's how I can reproduce the issue:

import React, {PropTypes} from 'react'

function Foo({bar}) { // react/prop-types error reported for bar on this line
  const {baz} = Foo
  return <div>{baz} {bar}</div>
}

Foo.propTypes = {
  bar: PropTypes.string.isRequired,
}

Foo.baz = 'hi'

This does not produce any error:

import React, {PropTypes} from 'react'

function Foo({bar}) {
  const baz = Foo.baz
  return <div>{baz} {bar}</div>
}

Foo.propTypes = {
  bar: PropTypes.string.isRequired,
}

Foo.baz = 'hi'

Here's a real use case

Looks like destructuring a property off of the function (whether inside the function itself or not) is causing issues.

[yannickcr]

@kentcdodds ok, it's a different problem then.

Can you open a new issue with your last message? Thanks.

[kentcdodds]

Cool, will do, thanks!