React-beautiful-dnd - 警告：defaultProps 将被删除

Question

I don't understand this warning in my console. Can someone tell me if it's library's problem or if it's an error in my side? Warning image

Here is my code which trigger the warning

I'm using the version 13.1.1

<DragDropContext onDragEnd={handleDrop}>
   <Droppable droppableId="list-container" >
      {(providedA: any) => (
         <div {...providedA.droppableProps} ref={providedA.innerRef}>
            {steps.map((step, index) => {
               return <Draggable  key={step.id} draggableId={step.id.toString()} index={index}>
                  {(provided: any) => (
                     <div ref={provided.innerRef} {...provided.dragHandleProps} {...provided.draggableProps}>
                        <div>{step.title}</div>
                     </div>
                   )}
                </Draggable>
              })}
           {providedA.placeholder}
         </div>
      )}
   </Droppable>
</DragDropContext>

Thanks

I tried to remove the code to find that is the Droppable element which cause the issue. I don't find on the github of React-beautiful-dnd any question on this.

Answer 1

The warning is caused by the library. Specifically, react-beautiful-dnd uses an old version of react-redux, which in turn uses the feature mentioned in the message: defaultProps .

So normally, react-beautiful-dnd would update it's code to use a new version of react-redux, and then you would update to their latest and the problem would go away. However, since react-beautiful-dnd is no longer being developed , it is unlikely that they will do that. This leaves you with a couple options:

1. The code still works, so you could just do nothing. React is warning you that defaultProps will eventually stop working, but we're not there yet. The earliest possible release that could break the code is react 19.0.0, but there isn't even a timeline for that release yet.

2. You could switch to a different library than react-beautiful-dnd. Maybe something like react-draggable would work for you, though i don't know what your needs are

3. You could fork react-beautiful-dnd and modify their code to fix it. Then you'd use the forked version of the code instead of the original.