multiple-amethyst•8mo ago

[antd: Menu] `children` is deprecated. Please use `items` instead.

It seems strange that this error is happening now when the app was serving the refine crm dummy data fine before, now that im trying to fetch my own data from a ZohoAnalytics data source instead im getting these ant library errors, but i dont see how that wasnt causing a deprication error before though?

2 Replies

kapa.ai•8mo ago

Hi @Salvador_James. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The warning you're encountering, [antd: Menu] children is deprecated. Please use items instead, is related to the Ant Design library's transition from using children to items in their Menu component. This change was introduced in Ant Design v4 and continues into v5. The warning is primarily shown in development mode and does not affect production. Here are some key points and potential actions based on the information from the knowledge sources: 1. Understanding the Warning: - The warning indicates that the children prop in the Menu component is deprecated and will be removed in a future major version. Instead, you should use the items prop. - This change is part of Ant Design's effort to streamline and improve the API. 2. Why the Warning Appeared: - The warning might not have appeared earlier because it is only shown in development mode. When you switched to fetching data from ZohoAnalytics, it might have triggered a re-render or a different code path that now exposes the warning. 3. Current Approach in Refine: - Refine currently uses the children prop for the Menu component due to its advantages with JSX and access control using the <CanAccess /> component. - Switching to items could complicate the implementation, especially for conditional rendering and access control. 4. Community and Contributions: - The Refine team is aware of this warning and is open to contributions from the community to address it. However, they have chosen to stick with children for now due to the benefits it provides. 5. Suppressing the Warning: - If the warning is disruptive, you can suppress it in development mode. Here is a code snippet shared by a community member to filter out the warning:

   const _error = console.error;
   const itemsWarning = "`children` will be removed in next major version. Please use `items` instead.";
   console.error = (...args) => {
       if (typeof args[0] === "string" && args[0].includes(itemsWarning)) {
           return;
       }
       _error(...args);
   };

   const _error = console.error;
   const itemsWarning = "`children` will be removed in next major version. Please use `items` instead.";
   console.error = (...args) => {
       if (typeof args[0] === "string" && args[0].includes(itemsWarning)) {
           return;
       }
       _error(...args);
   };

Place this code before rendering the Sider component to suppress the warning. For more detailed discussions and potential updates, you can refer to the following sources: - Github Issue #5393 (https://github.com/refinedev/refine/issues/5393) - Github Discussion #5379 (https://github.com/refinedev/refine/discussions/5379) - Github Issue #1857 (https://github.com/refinedev/refine/issues/1857) If you have an implementation idea or want to contribute, feel free to open a pull request on the Refine repository. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•8mo ago

<@918155659520925747> kapa.ai is still learning and improving, please let us know how it did by reacting below

[antd: Menu] `children` is deprecated. Please use `items` instead.

Did you find this page helpful?