Warnings shown when embedding wrapper child components
See original GitHub issueHi 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!
Issue Analytics
- State:
- Created 2 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
How To Create Wrapper Components in React with Props
Wrapper components are components that surround unknown components and provide a default structure to display the child components.
Read more >8 common React error messages and how to address them
8 common React error messages and how to address them · Warning: Each child in a list should have a unique key prop...
Read more >Why does React warn against an contentEditable component ...
React is warning you that you have children within that element that are managed by React. React only works from the top down....
Read more >Avoiding HOC; Favoring render props - GitHubのGist
Key point: an HOC doesn't really "wrap" their child component in a JSX sense, instead it extends your component. Meaning, the MyThingContainer component...
Read more >Using React Portals to Render Children Outside the DOM ...
Say we need to render a child element into a React application. ... can then toggle the button to either show or hide...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@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
andInputToolbox
get minified on the production build, whereas theMessageList
andMessageInput
components do not. I believe this has something to do withMessageList
andMessageInput
being class based andConversationHeader
andInputToolbox
being function based components.Heres an example of the minified vs unminified classes:
Minified![Screen Shot 2021-05-18 at 7 21 38 AM](https://user-images.githubusercontent.com/6536941/118643433-8cd49f00-b7aa-11eb-91ad-8fc172faad5b.png)
ConversationHeader
component:Non-minified![Screen Shot 2021-05-18 at 7 22 05 AM](https://user-images.githubusercontent.com/6536941/118646397-26518000-b7ae-11eb-82a3-14f0d0ed2ab0.png)
MessageInput
component:So, in your getChildren function when you are looping through the
types
to get thestrTypes
here: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
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/4434e7cecfdecee160026aee49ea6ee8You 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