Eslint-plugin-react: missing in props validation react/prop-types

[padsbanger]

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Link } from 'react-router';

export class Breadcrumbs extends Component {
  renderBreadcrumbsItems() {
    const { links } = this.props;
    return links.map((link, key) => {
      if (key === 0) {
        return (
          <li
            className="breadcrumbs-list-item home"
            key={key}
          ><Link to={link.path}> <i className="home icon" /> {link.value}</Link>
          </li>
        );
      }
      if (key === links.length - 1) {
        return (
          <li
            className="breadcrumbs-list-item"
            key={key}
          ><i className="angle right icon" />{link.value}
          </li>
        );
      }
      return (
        <li
          className="breadcrumbs-list-item"
          key={key}
        ><Link to={link.path}><i className="angle right icon" />{link.value}</Link>
        </li>
      );
    });
  }

  render() {
    return (
      <div className="breadcrumbs-list">
        <ul>
          {this.renderBreadcrumbsItems()}
        </ul>
      </div>
    );
  }
}

Breadcrumbs.PropTypes = {
  links: PropTypes.array,
};

export default Breadcrumbs;

I get this error from eslint:

./src/components/common/Breadcrumbs.js Line 8: 'links' is missing in props validation react/prop-types

Deps:

"eslint": "^4.9.0",
"eslint-plugin-react": "^7.4.0"

[ljharb]

You've exported Breadcrumbs as both a name and as the default, is that intentional?

If you remove one of the exports, or the other, does it pass?

[padsbanger]

@ljharb yes, thats intentional, changing it didnt fix anything :/

[ljharb]

It seems like it thinks renderBreadcrumbsItems is a component, because it’s a function that returns jsx. In general, renderFoo methods are an antipattern; and that should be a separate component, but the code as-is shouldn’t be warning.

[sparkbone]

Hi - I came across this page in a Google search for same error message. I believe you want Breadcrumbs.propTypes instead of Breadcrumbs.PropTypes (lowercase p)

[ljharb]

aha, @sparkbone thanks.

@padsbanger I'm happy to reopen this if correcting .PropTypes = to .propTypes = doesn't fix it.

[padsbanger]

@sparkbone thank you kind sir 🎩 that was stupid mistake from my side.

[joseph-teb]

"react/prop-types": [
  "enabled",
  { "ignore": "ignore", "customValidators": "customValidator" }
]

-------------------------------or use this rule2 option please-------------

"react/prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator> }]

[jainritik]

Hi - I came across this page in a Google search for same error message. I believe you want Breadcrumbs.propTypes instead of Breadcrumbs.PropTypes (lowercase p)
This really solve the issue.
Thanks ! @sparkbone