CODEWITHSUNDEEP
reactjsredux
Dan Zuzevich
Dan Zuzevich

Reputation: 3831

Using PropTypes with Redux Components

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.

Upvotes: 3

Views: 6022

Answers (2)

Arber Sylejmani
Arber Sylejmani

Reputation: 2108

These are some of the PropTypes, based on the documentation:

PropTypes.array,
PropTypes.bool,
PropTypes.func,
PropTypes.number,
PropTypes.object,
PropTypes.string,
PropTypes.symbol,
...

and PropTypes.boolean is not one of them. Read more here: https://reactjs.org/docs/typechecking-with-proptypes.html

Upvotes: 1

Travis White
Travis White

Reputation: 1977

PropTypes.boolean is the problem. Try PropTypes.bool

Upvotes: 5

Related Questions