Btukfyl

In my component I've used the following to set up the props, knowing that it's going to be some kind of data structure (and I was suggested that there's nothing to gain of exact definition of the object's fields).

Compy.propTypes = {

  isOpen: PropTypes.bool,

  permissions: PropTypes.arrayOf(PropTypes.object),

  dismiss: PropTypes.func

};

From that, I got the error as follows.

Warning: Failed prop type: Invalid prop permissions[0] of type string supplied to Compy, expected object.

Based on that, I assumed that the data is a string and that my expectations were wrong (it's an object that is being served but maybe it gets serialized or something, I thought). So I change the type as shown below.

Compy.propTypes = {

  isOpen: PropTypes.bool,

  permissions: PropTypes.arrayOf(PropTypes.string),

  dismiss: PropTypes.func

};

To my surprise, that produced the following error message.

Warning: Failed prop type: Invalid prop permissions[0] of type object supplied to Compy, expected string.

I understand the expected XXX part, since I can see that declaration in the code. What buffles me is that it seems like the complaint changes back, requesting precisely the thing I had previously. What's up with that?

Then I figured that maybe the message complains in regard to the fields inside the object, so I declared a shape according to a blog as shown below. That structure matches precisely what the object looks like (two strings and an array of strings).

Compy.propTypes = {

  isOpen: PropTypes.bool,

  permissions: PropTypes.arrayOf(PropTypes.shape({

    name: PropTypes.string,

    code: PropTypes.string,

    items: PropTypes.arrayOf(PropTypes.string)

  })),

  dismiss: PropTypes.func

};

Warning: Failed prop type: Invalid prop permissions[0] of type string supplied to Compy, expected object.

It looks like the computer tries to annoy me by being on the contrary to anything I type. Of course, it's obvious that's not the case. However, being fairly new to React, I can't make sense of it and I'm convinced that, since it's a quite weird behavior, someone will recognize it as something that I can try to debug. At this moment I'm stuck.

Warning: Failed prop type: Invalid prop permissions[0] of type string supplied to InvoiceCreationModal, expected object.

It looks like your permissions array is made up of objects and strings.
you should be able to avoid the warning by simply declare the fields as of type PropTypes.any

Compy.propTypes = {

  isOpen: PropTypes.bool,

  permissions: PropTypes.arrayOf(PropTypes.any),

  dismiss: PropTypes.func

};

alternatively you can try specifying the allowed types for your array

Compy.propTypes = {

   isOpen: PropTypes.bool,

   permissions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),

   dismiss: PropTypes.func

};

or make it more flexible and specify in which case it should trigger the warning

Compy.propTypes = {

       isOpen: PropTypes.bool,

       permissions: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {

       if (!/matchme/.test(propValue[key])) {

         return new Error(

           'Invalid prop `' + propFullName + '` supplied to' +

           ' `' + componentName + '`. Validation failed.'

         );

       }

    }),

       dismiss: PropTypes.func

    };

link to docs