Hi team,
I'm trying the example (DropDownList, itemRender) here: https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/custom-rendering/ but using last react version (18.2.0) the code give an error:
TS2746: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided.
| const index = itemProps.index;
| const itemChildren = (
> | <span style={{ color: "#00F" }}>
| ^^^^
| {li.props.children} {index}
| </span>
);Work using a cast:
<span style={{ color: "#00F" }}>
{li.props.children as ReactNode} {index}
</span>
Regards
1 Answer, 1 is accepted
Hello, Esse,
I tested the linked demo with React v18.2.0 and it behaved properly on my end. Can you test the sample below and see if it throws the reported error at your end?
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
Hello Vessy,
thanks for your answer. Your link work correctly, but here I have the same error https://codesandbox.io/s/solitary-firefly-87y5nc?file=/app/main.tsx (the example come from your page, I only update to react 18.2.0) and also in my environment.
Regards
Thanks a lot for the provided sample, the usage of Typescript files is the key of the thrown error here. I research the thrown error further and it turned out to be expected as when you use TypeScript with React 18 where the types for props no longer imply `children`. You can find interesting blog on this matter here:
Basically, casting the returned object to `ReactNode` (as found by you)
<span style={{ color: "#00F" }}>
{li.props.children as ReactNode} {index}
</span>or wrapping it inside a `React.Fragment` is the proper way to resolve such errors:
<span style={{ color: "#00F" }}>
<>
{li.props.children} {index}
</>
</span>