Javascript: Clarification regarding react/prop-types validation and react router dom

[rsancheza09]

I am getting the alert, that I have to validate in prop types match, but I think it is not necessary.

import React from 'react';

const Header = (props) => {
  const { match } = props; // 'match' is missing props validation (react/prop-types)
  return (
    <div>
      <h1>Hello</h1>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
};

export default Header;

Do I need to validate it? What's the new convention?

Regards

[ljharb]

It's definitely necessary; every prop should have a propType (also, every SFC should be a non-arrow function, per this guide).

In your case, it looks like:

match: PropTypes.shape({
  params: PropTypes.shape({
    id: PropTypes.node,
  }).isRequired,
}).isRequired

would be the minimal propType - you could restrict it further to PropTypes.string, perhaps?

[rsancheza09]

Thanks @ljharb but compiling the project and using this piece of code

import React from 'react';
import PropTypes from 'prop-types';

const Header = (props) => {
  const { match } = props;
  return (
    <div>
      <h1>Hello</h1>
      <h3>ID: {match.params.id}</h3>
    </div>
  );
};

Header.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.string,
    }),
  }),
};

export default Header;

I am getting now this error, that's the reason that I think that 'match' maybe should not be necessary.

propType "match" is not required, but has no corresponding defaultProp declaration. react/require-default-props

[ljharb]

My original code has isRequireds, use them and you wont have that error.

[rsancheza09]

Cool thanks.