TheSpicyMeatball / react-nanny

Utils to manage your React Children
Other
85 stars 4 forks source link

PropTypes warning: prop value undefined when required #11

Closed davegomez closed 2 years ago

davegomez commented 2 years ago

First of all, thank you for this library. Very useful.

I'm using PropTypes for type checking in my project (company) requirement and I'm getting a warning that says:

Warning: Failed prop type: The prop `prop-name` is marked as required in `Component`, but its value is `undefined`.
          at Component (/path/to/Component.js:10:5)
          at Container (/path/to/Container.js:19:5)

      at printWarning (node_modules/react/cjs/react.development.js:220:30)
      at error (node_modules/react/cjs/react.development.js:196:5)
      at checkPropTypes (node_modules/react/cjs/react.development.js:1935:11)
      at validatePropTypes (node_modules/react/cjs/react.development.js:2136:7)
      at Object.createElementWithValidation [as createElement] (node_modules/react/cjs/react.development.js:2240:5)
      at node_modules/react-nanny/lib/es5/_private/utils.js:11:60
          at Array.map (<anonymous>)
      at Object.processTypes (node_modules/react-nanny/lib/es5/_private/utils.js:6:52)

This happens when I use getChildrenByTypeDeep to scrape the children props and use them in the parent component.

const getComponentData = children =>
    getChildrenByTypeDeep(children, [Component]).reduce(
        (acc, { props: { handler, id, keywords = [], label, shortcut } }) => [
            ...acc,
            { handler, id, keywords, label, shortcut },
        ],
        []
    );

The stack trace took me to this line just before PropTypes kicks in and tries to validate the types:

      const component = React.createElement(x);

Needless to say, the props are not undefined and the warning appears both in the browser console and in the tests output.

TheSpicyMeatball commented 2 years ago

Hi Dave,

Would it be possible to recreate your issue simplified in a code sandbox? If so, I can look into it and see what I can do for you.

In the meantime, if you have control over the component that you're searching for, you could use a customTypeKey to do the searching which will avoid this line.

davegomez commented 2 years ago

Thank you for the swift response Michael.

I'll give it a try to the solution you propose and I will work on a sandbox this weekend to reproduce the issue.

davegomez commented 2 years ago

@TheSpicyMeatball using a custom type key worked to solve my issue. So I'm closing this but I still owe you the sandbox so you can check how it works with the PropTypes.

Thank you.