This article is about fixing error when Property 'children' does not exist on type 'IntrinsicAttributes....' in kutlugsahin react-smooth-dnd
  • 17-Jan-2023
Lightrun Team
Author Lightrun Team
Share
This article is about fixing error when Property 'children' does not exist on type 'IntrinsicAttributes....' in kutlugsahin react-smooth-dnd

Error when Property ‘children’ does not exist on type ‘IntrinsicAttributes….’ in kutlugsahin react-smooth-dnd

Lightrun Team
Lightrun Team
17-Jan-2023

Explanation of the problem

An error occurred after upgrading a project from React 17 to React 18. The error message is as follows:

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’.

The error message suggests that the component Draggable is being passed an incorrect set of props. Specifically, the type { children: ReactNode; key: number; } is not assignable to the expected type IntrinsicAttributes & IntrinsicClassAttributes & Readonly. This is likely due to a change in the props interface of the Draggable component in React 18, which is causing the component to receive unexpected props.

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>
  );
}

The above code is the provided code, where the error is occuring. The problem description is that after upgrading a project from React 17 to React 18, an error is occuring with the message “TS2769: No overload matches this call”. The error message suggests that the component Draggable is being passed an incorrect set of props. The code snippet is provided for context of the problem.

Troubleshooting with the Lightrun Developer Observability Platform

Getting a sense of what’s actually happening inside a live application is a frustrating experience, one that relies mostly on querying and observing whatever logs were written during development.
Lightrun is a Developer Observability Platform, allowing developers to add telemetry to live applications in real-time, on-demand, and right from the IDE.

  • Instantly add logs to, set metrics in, and take snapshots of live applications
  • Insights delivered straight to your IDE or CLI
  • Works where you do: dev, QA, staging, CI/CD, and production

Start for free today

Problem solution for error when Property ‘children’ does not exist on type ‘IntrinsicAttributes….’ in kutlugsahin react-smooth-dnd

This error message suggests that there is a problem with the way the “children” property is being used in the react-smooth-dnd library.

One possible solution is to ensure that the “children” property is being passed to the react-smooth-dnd component as a valid prop. You can check the documentation of react-smooth-dnd to see if the ‘children’ prop is required or not. If it is not required, you can remove it. If it is required, you should pass it correctly.

Another solution could be that you are using an old version of the react-smooth-dnd library which doesn’t have the “children” property, so you can try updating the library to the latest version.

It’s also possible that you are using the wrong type for the children prop. make sure that you are passing the correct type of children prop which is accepted by react-smooth-dnd

In order to fix this issue, you should also check your imports and make sure that you are importing the correct version of react-smooth-dnd, and that there are no conflicts with other dependencies that you are using in your project.

It’s worth noting that without more context on how you are using the react-smooth-dnd library, the above solutions are assumptions and the root cause of the problem could be something else.

Other popular problems with kutlugsahin react-smooth-dnd

Problem: Inconsistency in Dragging Behavior

Description: Some users have reported issues with the dragging behavior in the react-smooth-dnd library, specifically with the inconsistency of the draggable elements. The elements may not always respond as expected to the draggable actions, causing confusion for the users.

Solution:

One possible solution to this problem is to ensure that the draggable elements have the correct positioning and CSS styles applied to them. Additionally, the library’s documentation suggests that setting the shouldAcceptDrop prop can help control the behavior of the draggable elements.

Problem: Issues with Nesting Draggable Elements

Description: Some users have reported difficulty in implementing nested draggable elements within the react-smooth-dnd library. The nested elements may not function correctly, or the parent elements may not correctly recognize the nested elements as draggable.

Solution:

The library documentation suggests that using the Group component can help to properly nest draggable elements. Additionally, ensuring that the correct props are passed to the nested elements, such as the dragHandleSelector prop to specify the draggable handle, can also help to resolve this issue.

Problem: Performance degradation when dealing with a large number of items

Description: Some users have reported poor performance when using the react-smooth-dnd library with a large number of items. The library may slow down when rendering, dragging and updating a large number of items in the list, causing the application to become unresponsive.

Solution:

One solution to this problem is to implement a virtualized list using a library like react-virtualized to handle only visible items and reuse the DOM element, this way the library only updates the elements that are visible on the screen and not all the items in the list. Additionally, using the shouldAnimatePlaceholders prop to control placeholder animation can help improve performance when dealing with a large number of items.

A brief introduction to kutlugsahin react-smooth-dnd

Kutlugsahin react-smooth-dnd is a drag-and-drop library for React.js. It allows developers to create smooth and intuitive drag-and-drop interactions in their web applications. The library is built on top of the popular react-dnd library and offers several additional features such as smooth animations, customizable drag previews, and support for touch devices.

The library provides a set of higher-order components and hooks that can be used to add drag-and-drop functionality to any React component. It also offers a variety of customization options to allow developers to fine-tune the drag-and-drop behavior to meet the specific needs of their application. The library is well-documented and provides a comprehensive set of examples that can be used to quickly get started with implementing drag-and-drop interactions in a React.js application.

Kutlugsahin react-smooth-dnd is a powerful and flexible library that makes it easy to add smooth and user-friendly drag-and-drop interactions to any web application built with React.js.

Most popular use cases for kutlugsahin react-smooth-dnd

  1. Drag and Drop functionality: react-smooth-dnd can be used to easily implement drag and drop functionality in a React application. It provides a set of higher-order components that can be used to create lists, boards, or other types of containers that support draggable and droppable items. This can be done by wrapping the component that you want to make draggable with the “Draggable” component and the component that you want to make droppable with the “Droppable” component.
import { Draggable, Droppable } from 'react-smooth-dnd';

function MyComponent() {
  return (
    <Droppable droppableId="droppable">
      {(provided, snapshot) => (
        <div ref={provided.innerRef}>
          <Draggable draggableId="draggable">
            {(provided, snapshot) => (
              <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                My draggable item
              </div>
            )}
          </Draggable>
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  );
}
  1. Grouping and Sorting: react-smooth-dnd can also be used to create groups of items and to sort items within a group. It provides the “Group” component that can be used to create groups of items, and the “Sortable” component that can be used to sort items within a group. This can be done by wrapping the component that you want to group with the “Group” component and the component that you want to sort with the “Sortable” component.
import { Group, Sortable } from 'react-smooth-dnd';

function MyComponent() {
  return (
    <Group>
      {(provided, snapshot) => (
        <div ref={provided.innerRef}>
          <Sortable sortableId="sortable">
            {(provided, snapshot) => (
              <div ref={provided.innerRef} {...provided.sortableProps}>
                My sortable item
              </div>
            )}
          </Sortable>
          {provided.placeholder}
        </div>
      )}
    </Group>
  );
}
  1. Customizable styles and animations: react-smooth-dnd allows for customizing the styles and animations of the draggable and droppable items. It provides various props like draggableStyle, droppableStyle, and animationDuration that can be used to customize the look and feel of the items. Additionally, it also allows the use of custom CSS classes to style the elements. This can be done by passing the class name as prop to the Draggable and Droppable component.
import { Draggable, Droppable } from 'react-smooth-dnd';

function MyComponent() {
  return (
    <Droppable droppableId="droppable" droppableStyle={{ background: 'lightgreen' }}>
      {(provided, snapshot) => (
        <div ref={provided.innerRef}>
          <Draggable draggableId="draggable" draggableStyle=
Share

It’s Really not that Complicated.

You can actually understand what’s going on inside your live applications.

Try Lightrun’s Playground

Lets Talk!

Looking for more information about Lightrun and debugging?
We’d love to hear from you!
Drop us a line and we’ll get back to you shortly.

By submitting this form, I agree to Lightrun’s Privacy Policy and Terms of Use.