CODEWITHSUNDEEP
reactjsreact-proptypes
m.rp
m.rp

Reputation: 748

React PropTypes checks for the wrong type

I have a problem with a PropTypes definition in React, i defined the type of the 'doc_count_error_upper_bound' field to be of type 'number', but it gets checked against type 'object'. I presume somewhere the PropTypes definition breaks down for some reason, since both the data and the definition seem to be correct, and the other fields are treated ok.

The app is composed of a series of components organized with react-grid-layout https://github.com/STRML/react-grid-layout

propTypes warning:

 index.js:1 Warning: Failed prop type: Invalid prop `data[0].subAggregationTerm.doc_count_error_upper_bound` of type `number` supplied to `MultiBarChart`, expected `object`.
        in MultiBarChart (at App.jsx:219)
        in div (at App.jsx:179)
        in div (at App.jsx:178)
        in Resizable (created by GridItem)
        in DraggableCore (created by GridItem)
        in GridItem (created by ReactGridLayout)
        in div (created by ReactGridLayout)
        in ReactGridLayout (created by ResponsiveReactGridLayout)
        in ResponsiveReactGridLayout (created by WidthProvider)
        in WidthProvider (at App.jsx:231)
        in div (at App.jsx:229)
        in App (at src/index.js:6)

Component propTypes definition

MultiBarChart.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      key_as_string: PropTypes.string,
      key: PropTypes.number,
      doc_count: PropTypes.number,
      subAggregationTerm: PropTypes.objectOf(PropTypes.shape({
        doc_count_error_upper_bound: PropTypes.number,
        sum_other_doc_count: PropTypes.number,
        buckets: PropTypes.arrayOf(PropTypes.shape({
          key: PropTypes.number,
          doc_count: PropTypes.number,
        })),
      })),
    }),
  ).isRequired,
  onHit: PropTypes.func.isRequired,
};

Data:

const dateHistogramSubAggs2 = [{
  key_as_string: '1576105200',
  key: 1576105200000,
  doc_count: 0,
  subAggregationTerm: {
    doc_count_error_upper_bound: 0,
    sum_other_doc_count: 0,
    buckets: [{
      key: 'label_1',
      doc_count: 215,
     }],
   },
 }];

Upvotes: 1

Views: 182

Answers (1)

Alberto Perez
Alberto Perez

Reputation: 2922

I think you could fix your problem removing PropTypes.objectOf and leaving only PropTypes.shape (here you could see why):

MultiBarChart.propTypes = {
  data: PropTypes.arrayOf(
    PropTypes.shape({
      key_as_string: PropTypes.string,
      key: PropTypes.number,
      doc_count: PropTypes.number,
      subAggregationTerm: PropTypes.shape({
        doc_count_error_upper_bound: PropTypes.number,
        sum_other_doc_count: PropTypes.number,
        buckets: PropTypes.arrayOf(PropTypes.shape({
          key: PropTypes.number,
          doc_count: PropTypes.number
        }))
      }),
    }),
  ).isRequired,
  onHit: PropTypes.func.isRequired,
};

Upvotes: 3

Related Questions