Rank 1
Iron
Iron
Veteran
I am in the process of upgrading React to v18 and KendoReact to v5 latest versions. The only issue I am having is with the PanelBar. We were using PanelBarUtils.mapItemsToComponents(items) and passing this to the children prop of the PanelBar. The current Kendo documentation says this is still valid, however it now results in a TypeScript error:
Type 'PanelBarItem[]' is not assignable to type 'ReactNode'.
Type 'PanelBarItem[]' is not assignable to type 'ReactFragment'.
The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
Type 'IteratorResult<PanelBarItem, any>' is not assignable to type 'IteratorResult<ReactNode, any>'.
Type 'IteratorYieldResult<PanelBarItem>' is not assignable to type 'IteratorResult<ReactNode, any>'.
Type 'IteratorYieldResult<PanelBarItem>' is not assignable to type 'IteratorYieldResult<ReactNode>'.
Type 'PanelBarItem' is not assignable to type 'ReactNode'.
Type 'PanelBarItem' is missing the following properties from type 'ReactPortal': key, children, typets(2322)This can be observed in the demos for the PanelBar on the Kendo website, simply open the first Customisation demo in either CodeSandBox or StackBlitz and add @types/react as a dependency:
https://www.telerik.com/kendo-react-ui/components/layout/panelbar/customization/#toc-collections
1 Answer, 1 is accepted
Hello, David,
I tried to replicate the described issue but no errors were thrown at my end when I added the `@types/react` dependency to the linked demo. Can you, please, take a look at my test sample and see whether you are able to replicate the issue at it at your end? What are the steps if so?
https://stackblitz.com/edit/react-elf7xx?file=app%2Fmain.jsx
Regards,
Vessy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Veteran
Hi Vessy,
As mentioned this is a Typescript error. I have replicated the issue in your test sample by changing main.jsx to main.tsx.
Kind regards,
David
Hi, David, thank you for the update and please, excuse me for the lapse.
In order to avoid the thrown warning in a `.tsx` file you will need to set the `items` and `components` types explicitly:
https://stackblitz.com/edit/react-elf7xx-kjfczp?file=app%2Fmain.tsx