Using PropTypes with Redux Components

Question

I currently have my Redux connected React components set up utilizing two export statements, in order to make shallow testing of the components easier. I have just started implementing propTypes, and am running into a problem with the Redux connected components.

Here is an example of one of them:

export class SecondaryHeader extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    const { detail, toggleDetail, survivorsActive } = this.props

    return (
      <div className="secondary-header">
        <div className="container-fluid">
          <div className="row">

            <FontAdjust />
            <ColumnTwo detail={detail} survivorsActive={survivorsActive} />
            <ColumnThree detail={detail} toggleDetail={toggleDetail} />

          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    detail: state.detail,
    survivorsActive: state.journey.survivorsActive
  }
}

SecondaryHeader.propTypes = {
  detail: PropTypes.boolean,
  toggleDetail: PropTypes.func,
  survivorsActive: PropTypes.boolean
}

export default connect(mapStateToProps, actions)(SecondaryHeader)

The error I get in console is something like this for all of the propTypes:

prop type `detail` is invalid; it must be a function

Does anyone know of a non-intensive way about getting propTypes to work with this setup? If I have to change it, so be it, but I prefer something that does not change what I have too much.

Answer 1

PropTypes.boolean is the problem. Try PropTypes.bool