Warnings shown when embedding wrapper child components

Hi again,

This is not really an issue but more of an opinion. I’ve noticed some warnings are being shown when embedding “invalid” child elements into some components. Something like:

Warning: Failed prop type: "MyMessage" is not a valid child for MessageList. Allowed types: Message, MessageGroup, MessageSeparator, MessageListContent

My issue here is that this warning is shown if I try to wrap my components for custom logic or even just for cleaner code. For example, the following component would throw this warning.

const MyMessage = (props: MessageProps) => {

    const {} = props;

    //some custom logic here

    return (
        <Message {...props} />
    );
};

Are these warnings shown on the production build as well? Or only the dev build?

Thanks!

[nzayatz14]

@supersnager so after digging into this a bit, it looks like your getChildren function is relying on the code to not be minified. However, the ConversationHeader and InputToolbox get minified on the production build, whereas the MessageList and MessageInput components do not. I believe this has something to do with MessageList and MessageInput being class based and ConversationHeader and InputToolbox being function based components.

Heres an example of the minified vs unminified classes:

Minified ConversationHeader component:

Non-minified MessageInput component:

So, in your getChildren function when you are looping through the types to get the strTypes here:

var strTypes = types.map(function (t) {
    return t.name || t.displayName;
  });

Your result is not quite what you’d expect:

Not sure how you want to move forward with this information, but what I’ve seen from most packages that have specified child props is they will throw a warning on the development build saying something like This is not a valid child element of MyComponent, expecting MyChildComponent or MySecondChildComponent. But on the production build, they will just ignore it and let it happen, not remove items that are not “supposed to be there.”

Hope this helps

[nzayatz14]

Ahh interesting, thank you.

For anyone that may come across this while struggling with the as prop in typscript, here’s an example of how to add this prop to your component: https://gist.github.com/kripod/4434e7cecfdecee160026aee49ea6ee8

You could also just pass the as prop as a string type but then you will not have any checking for if your string is a valid ElementType