CODEWITHSUNDEEP
reactjsvalidationreact-proptypes
sachitha kariyawasm
sachitha kariyawasm

Reputation: 31

react prop type validation error

I have a React component with the following proptypes defined:

NavBar.propTypes = {
  navbar: PropTypes.arrayOf(PropTypes.shape({
    brand: PropTypes.shape({
      linkTo: PropTypes.string,
      text: PropTypes.string,
    }),
    links: PropTypes.arrayOf(PropTypes.shape({
      linkTo: PropTypes.string,
      text: PropTypes.string,
      dropdown: PropTypes.bool,
      active: PropTypes.bool,
      links: PropTypes.links,
      eventKey: PropTypes.string,
    })),
  })),
};

The props validation given following errors:

20:50  error  'navbar.brand.linkTo' is missing in props validation  react/prop-types
20:83  error  'navbar.brand.text' is missing in props validation    react/prop-types
5:45  error  'linkTo' is missing in props validation  react/prop-types
5:60  error  'text' is missing in props validation    react/prop-types
6:47  error  'linkTo' is missing in props validation  react/prop-types
6:62  error  'text' is missing in props validation    react/prop-types
5:7   error  'active' is assigned a value but never used  no-unused-vars
6:23  error  'links' is missing in props validation       react/prop-types
6:29  error  'links.map' is missing in props validation   react/prop-types
17:42  error  'text' is missing in props validation        react/prop-types
7:23  error  'links' is missing in props validation      react/prop-types
7:29  error  'links.map' is missing in props validation  react/prop-types

How should I structure my proptypes to not receive these errors?

Upvotes: 1

Views: 613

Answers (1)

Cameron Aziz
Cameron Aziz

Reputation: 487

navbar validation issues: You are defining navbar as an array but it looks like it is being used as an object.

linkTo validation issues: You are nesting linkTo inside of navbar.brandand navbar.links in the propsTypes definition yet it looks like you are using it directly as this.props.linksTo.

text validation issues: You are nesting text inside of navbar.brandand navbar.links in the propsTypes definition yet it looks like you are using it directly as this.props.text.

links validation issues: You are nesting links inside of navbar in the propsTypes definition yet it looks like you are using it directly as this.props.links.

activevalidation issue: You are defining active and not using it.

If you include your component definition, we could offer more insight.

Upvotes: 2

Related Questions