Search code examples
reactjsreact-proptypes

Why is this object failing my own PropTypes validation


I have a PropTypes validation as follows:

static propTypes = {
    tileHost: PropTypes.string,
    center: PropTypes.arrayOf(PropTypes.number),
    zoom: PropTypes.number,
    layers: PropTypes.objectOf(PropTypes.exact({
      visible: PropTypes.boolean,
      selected: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.node)),
      onClick: PropTypes.func,
      activeType: PropTypes.string
    })),
    focusBbox: PropTypes.arrayOf(PropTypes.number)
  }

I'm calling it like this:

<Map
      height='350px'
      tileHost='mapbox'
      layers={{
        parcels: {
          visible: true,
          selected: {
            'APN': [apn]
          }
        },
      }}
      focusBbox={bbox}
    />

It looks correct to me, yet this error is thrown:

Warning: Failed prop type: Invalid prop `layers.parcels` key `visible` supplied to `Map`.
Bad object: {
  "visible": true,
  "selected": {
    "APN": [
      "11141327"
    ]
  }
}
Valid keys: [
  "visible",
  "selected",
  "onClick",
  "activeType"
]

Is this a bug in prop-types (15.7.2) or am I doing something wrong?


Solution

  • visible property should be PropTypes.bool:

    Map.propTypes = {
      layers: PropTypes.objectOf(
        PropTypes.exact({
          // Not PropTypes.boolean
          visible: PropTypes.bool
        })
      )
    };