ReactJS: propTypes validation for array of objects

Question

I have an array of objects

[
    {
      id: 1,
      customtitle: '',
      IconSRC: '',
      btnColor: '',
      inlineSyle: '',
      btnStyle: {
        width: '100px',
        height: '100px',
        flexDirection: 'column',

      },
      num: 1,
    },
    {
      id: 2,
      customtitle: '',
      IconSRC: '',
      btnColor: '',
      inlineSyle: '',
      btnStyle: {
        width: '100px',
        height: '100px',
        flexDirection: 'column',

      },
      num: 2,
    },]

and i confused to making it work as props validation .I need help to fix it, I try this way

Function.propTypes = {
  list: PropTypes.objectOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),
};
Function.defaultProps = {
  List: [],
};

But that didn't work. without this proptypes my component works correctly. but eslint show an error with this text

.map' is missing in props validation eslint(react/prop-types)

technicallynick · Accepted Answer · 2020-08-17 18:56:03Z

11

What you want is actually PropTypes.arrayOf(). For example:

list: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),

You can see a full list of PropTypes here.

edited Aug 17, 2020 at 18:56

answered Nov 25, 2019 at 18:54

technicallynick

1,5829 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Emile Bergeron Over a year ago

arrayOf with a lowercase a.

Z-Soroush Over a year ago

@EmileBergeron thanks. and another thing that PropTypes.object is forbidden.what should I use? defaultProps also have a problem with List: [] it say >defaultProp "List" has no corresponding propTypes declaration

Emile Bergeron Over a year ago

@zeiasoroush there's a typo, you have list in the propTypes but List in the defaultProps.

Emile Bergeron Over a year ago

@zeiasoroush PropTypes.object is discouraged, but if you're not going to use it, you could just ignore it completely. Or, use PropTypes.shape again and define the btnStyle properties that you're going to use.

Z-Soroush Over a year ago

@EmileBergeron thank you for your fast answer.I understood the problem

|

developerKumar · Accepted Answer · 2019-11-25 18:59:35Z

2

You can use it like:

Function.propTypes = {
  list: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    btnColor: PropTypes.string,
    customTitle: PropTypes.string,
    btnStyle:PropTypes.object
    IconSRC: PropTypes.string,
    inlineSyle: PropTypes.string,
  })),
};
Function.defaultProps = {
  List: [],
};

Also for more details about proptypes, visit Typechecking With PropTypes here

answered Nov 25, 2019 at 18:59

developerKumar

1,79612 silver badges14 bronze badges

Collectives™ on Stack Overflow

ReactJS: propTypes validation for array of objects

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related