Eslint - 'match' is missing in props validation (react/prop-types)

Question

My eslint is failing on the following line.

  const id = this.props.match.params.personID;

How can I fix this. Setting a rule to ignore would be ok. Finding a fix would be better.

Error

 severity: 'Error'
    message: ''match' is missing in props validation (react/prop-types)'
    at: '14,27'
    source: 'eslint'
    code: 'react/prop-types'

Answer 1

When you are checking your prop types you also have to verify the shape of match.

If you are using flow:

type Props = {
  match: {
    params: {
      field1: number,
      field2: string,
    }
  }
  ...
}

class Component extends React.Component<Props> {
  ...
}

If you aren't and are using PropTypes...

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  ...
}

MyComponent.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      field1: PropTypes.number.isRequired
      field2: PropTypes.string
    })
  }),
  ...
}