Property 'children' does not exist on type 'IntrinsicAttributes....'

[pmoieni]

I just upgraded my project from react 17 to react 18 and now I'm getting this error.

TS2769: No overload matches this call.
Overload 1 of 2, '(props: DraggableProps | Readonly): Draggable', gave the following error.
Type '{ children: ReactNode; key: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Overload 2 of 2, '(props: DraggableProps, context: any): Draggable', gave the following error.
Type '{ children: ReactNode; key: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.
Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly'.

this is my code:

function ReorderList({ items }: props) {
  const [allItems, setAllItems] = useState(items);

  return (
    <div className="reorder-list">
      <Container
        lockAxis="y"
        dragClass="reorder-list-dragging"
        dragHandleSelector=".reorder-list-handle"
        onDrop={(event) => setAllItems(applyDrag(allItems, event))}
      >
        {allItems.map((item, idx) => {
          return <Draggable key={idx}>{item}</Draggable>;
        })}
      </Container>
    </div>
  );
}

[SerhiyDemchuk]

have you solved it? Container and Droggable have a prop called render. Move each component's children to this prop This is a rewritten smooth-dnd-demo.
<div className="card-scene"> <Container orientation="horizontal" onDrop={this.onColumnDrop} dragHandleSelector=".column-drag-handle" dropPlaceholder={{ animationDuration: 150, showOnTop: true, className: 'cards-drop-preview', }} render={() => ( <div> {this.state.scene.children.map((column: any) => { return ( <Draggable key={column.id} render={() => ( <div className={column.props.className}> <div className="card-column-header"> <span className="column-drag-handle">&#x2630;</span> {column.name} </div> <Container {...column.props} groupName="col" onDragStart={e => console.log('drag started', e)} onDragEnd={e => console.log('drag end', e)} onDrop={e => this.onCardDrop(column.id, e)} getChildPayload={index => this.getCardPayload(column.id, index) } dragClass="card-ghost" dropClass="card-ghost-drop" onDragEnter={() => { console.log('drag enter:', column.id); }} onDragLeave={() => { console.log('drag leave:', column.id); }} onDropReady={p => console.log('Drop ready: ', p)} dropPlaceholder={{ animationDuration: 150, showOnTop: true, className: 'drop-preview', }} dropPlaceholderAnimationDuration={200} render={() => ( <div> {column.children.map((card: any) => { return ( <Draggable key={card.id} render={() => ( <div {...card.props}> <p>{card.data}</p> </div> )} /> ); })} </div> )} /> </div> )} /> ); })} </div> )} /> </div>

However, now I have errors in the console.

[pmoieni]

@SerhiyDemchuk I'm still getting the same error

<Container
        lockAxis="y"
        dragClass="reorder-list-dragging"
        dragHandleSelector=".reorder-list-handle"
        onDrop={(event) => setAllItems(applyDrag(allItems, event))}
        render={() => (
          <>
            {allItems.map((item, idx) => {
              return <Draggable key={idx}>{item}</Draggable>;
            })}
          </>
        )}
      />

[SerhiyDemchuk]

@pmoieni do the same to Draggabe children, the component also has the prop "render"

[pmoieni]

@SerhiyDemchuk thanks. Now it's working.

<Container
        lockAxis="y"
        dragClass="reorder-list-dragging"
        dragHandleSelector=".reorder-list-handle"
        onDrop={(event) => setAllItems(applyDrag(allItems, event))}
        render={() => (
          <>
            {allItems.map((item, idx) => {
              return <Draggable key={idx} render={() => <>{item}</>} />;
            })}
          </>
        )}
      />

[SerhiyDemchuk]

@pmoieni do you have any errors in the console? Because despite I have no errors in IDE, I don't see any data to be rendered

[pmoieni]

@SerhiyDemchuk I thought when the error is gone everything should work. I have lots of errors in the console and just a blank screen. someone should update the documentation.

[MSSPL-KamalenduGarai]

Hi, is there any update on this cause I am having the same issue.

[BahaMagi]

If someone is still having that problem: I think its only a type issue where the components were not declared in a way that allows them to have child components. We only came across this when we updated typescript at some point.

We wrote a patch for it. The Draggable and Container components extend the incorrect type (e.g. in Draggable.d.ts)

declare class Draggable extends Component<DraggableProps> {

rather than

declare class Draggable extends Component<PropsWithChildren<DraggableProps>> {

Here is the patch file we used to fix it for us:

diff --git a/dist/src/Container.d.ts b/dist/src/Container.d.ts
index cdd0c03b8744ce35af905b5d5ce867f725f299b8..1786963d81768adc7b0fc4ac2909bbd690aac291 100644
--- a/dist/src/Container.d.ts
+++ b/dist/src/Container.d.ts
@@ -1,11 +1,11 @@
-import React, { Component, CSSProperties } from 'react';
+import React, { Component, CSSProperties,PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 import { ContainerOptions, SmoothDnD } from 'smooth-dnd';
 interface ContainerProps extends ContainerOptions {
     render?: (rootRef: React.RefObject<any>) => React.ReactElement;
     style?: CSSProperties;
 }
-declare class Container extends Component<ContainerProps> {
+declare class Container extends Component<PropsWithChildren<ContainerProps>> {
     static propTypes: {
         behaviour: PropTypes.Requireable<string>;
         groupName: PropTypes.Requireable<string>;
diff --git a/dist/src/Draggable.d.ts b/dist/src/Draggable.d.ts
index 7ddbb5b3b13d1ea61c59a2ced1205afdbc68b647..9783d0fc33f10b6a3944b17bbe6b2c6a0e9fc6f8 100644
--- a/dist/src/Draggable.d.ts
+++ b/dist/src/Draggable.d.ts
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React, { Component, PropsWithChildren } from 'react';
 import PropTypes from 'prop-types';
 export interface DraggableProps {
     render?: () => React.ReactElement;
     className?: string;
 }
-declare class Draggable extends Component<DraggableProps> {
+declare class Draggable extends Component<PropsWithChildren<DraggableProps>> {
     static propsTypes: {
         render: PropTypes.Requireable<(...args: any[]) => any>;
         className: PropTypes.Requireable<string>;

Can just run yarn patch yourself or copy this file into .yarn/patches . Dont forget to update the package.json with the patch

"react-smooth-dnd": "patch:react-smooth-dnd@npm:0.11.1#../.yarn/patches/react-smooth-dnd-npm-0.11.1-2550ef032f.patch",

[DoctorDib]

Can confirm that adding extends Component<PropsWithChildren<DraggableProps>> and extends Component<PropsWithChildren<ContainerProps>> in there respected places does seem to fix the issue. Do we know when this fix / patch will be applied to the main branch?

[MSSPL-KamalenduGarai]

While suggested patch did work, a patched version will be lifesaver for many of us.

[lqduy]

import Box from "@mui/material/Box"
import { Draggable as SmoothDraggable } from "react-smooth-dnd"
import { type ReactNode } from "react"
import { type SxProps } from "@mui/material"

interface TypeProps {
  children: ReactNode
  sx?: SxProps
}

const DndDraggable: React.FC<TypeProps> = ({ children, sx }) => {
  return <SmoothDraggable render={() => <Box sx={sx}>{children}</Box>} />
}

export default DndDraggable

[marioolofo]

Just an update for anyone having this issue, don't forget to pass the ref to the div in the render function:

<SmoothDraggable render={(ref) => <Box ref={ref} sx={sx}>{children}</Box>} />

This solved the errors for me

edit:
and don't use fragments as your Draggable component, as it will not work too...