react-beautiful-dnd Invariant failed, draggableId requires an integer index prop

Issue

What version of `React` are you using?

18.0.0

What version of `react-beautiful-dnd` are you running?

13.1.0

What browser are you using?

Google Chrome

Demo

<DragDropContext onDragEnd={this.onDragEnd.bind(this)}>

  {this.state.currentCycles.map((cycle, index) => (

    <Droppable droppableId={(cycle.id).toString()} key={index}>

      {provider => (

        <div {...provider.droppableProps} ref={provider.innerRef} className="task__list">

          <div className="mosaic" key={index}>
            {cycle.cfc_cycle_users.map((cycleUser, index) => (
              <Draggable draggableId={(cycleUser.id).toString()} key={cycleUser.id}>

                {provider => (
                  <div {...provider.draggableProps} {...provider.dragHandleProps} ref={provider.innerRef} className="dqs">
                    <div className="mosaic__item" key={index}>
                      <div className="mosaic__section">
                        <h4 className="mosaic__title">N°{cycleUser.position} - Team {cycleUser.cfc_registration.team_name} - {cycleUser.cfc_registration.cfc_user.box}</h4>
                        <p className="mosaic__paragraph">{cycleUser.cfc_registration.teams}</p>
                      </div>
                    </div>
                  </div>
                )}

              </Draggable>

            ))}

          </div>

        </div>
      )}
      
    </Droppable>


  ))}
  
</DragDropContext>

Apr 28 '22 06:04 antho227

you forgot to put index props in Draggable component

May 05 '22 05:05 DevinWinando

Am facing the same issue even after providing index to the draggable

Jul 27 '22 12:07 bhandavya-bv

This issue is caused by React 18. This library is no longer maintained so I made a for which fixes this issue, @hello-pangea/dnd

npm install @hello-pangea/dnd
Replace all imports of react-beautiful-dnd with @hello-pangea/dnd
Enjoy :)

Aug 15 '22 16:08 Xhale1

This issue is caused by React 18. This library is no longer maintained so I made a for which fixes this issue, @hello-pangea/dnd

npm install @hello-pangea/dnd

Replace all imports of react-beautiful-dnd with @hello-pangea/dnd

Enjoy :)

It worked for me, thanks a lot 🎉

Nov 10 '22 12:11 kaahndemir

Hi, I'm still having the same problem.

Nov 19 '22 16:11 TiagoHolandaa

how do i solve this?

Nov 19 '22 16:11 TiagoHolandaa

It doesn't work for me

Dec 09 '22 12:12 dikum98

I have the same problem :( Does anyone with a workaround or solution for this?

Apr 06 '23 01:04 caroguerrerosilvera

Problem happen in : React 18+ Solution: Using useId It has worked for me ` const draggableId = React.useId() <Draggable index={index} draggableId={draggableId + index.toString()}> </Draggable >

`