Reorder a List with react-beautiful-dnd

InstructorAlex Reardon

Share this video with your friends

Send Tweet

In this lesson, we will add react-beautiful-dnd to our project to enable reordering of our tasks.

In our lesson, we use a styled-components innerRef callback to get the DOM ref for our styled component.

If you have not used ref's in React before I recommend you check out:

A small cheatsheet about refs:

  • On a React Element such as <div> the ref callback returns a DOM node
  • On a React Component such as <Person> the ref callback returns the instance of the component - which is not what react-beautiful-dnd needs
  • It is a common practice to create your own innerRef callback for your components to return the underlying DOM reference of the component
Héctor BlisS
Héctor BlisS
~ 2 years ago

Hello i have been trying this implementation several times but i still getting this error: Error: Invariant failed: Cannot get draggable ref from drag handle any insight? thanks.

Alex Reardon
Alex Reardon(instructor)
~ 2 years ago

You should fine this guide helpful: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

Héctor BlisS
Héctor BlisS
~ 2 years ago

I found a solution, i had to use ref={provided.innerRef} and innerRef={provided.innerRef} both in the Draggable and the Droppable components, to solve it =P

Eric Montzka
Eric Montzka
~ 2 years ago

Thanks Hector, that fixed it for me too! Btw, my react developer tools for chrome doesn't seem to work on this app for some reason. Anyone else have that problem?

IvorScott Cummings
IvorScott Cummings
~ 2 years ago

The innerRef prop has been depreciated. https://www.styled-components.com/docs/api#deprecated-innerref-prop Also see: https://github.com/atlassian/react-beautiful-dnd/issues/875

Side note (for TypeScript): If you're using TypeScript like me, you will have trouble getting TypeScript to infer the type of "provided.innerRef". However, this works:

{({ innerRef, droppableProps, placeholder }) => ( <TaskList ref={innerRef as any} {...droppableProps}> ... )

Ali Ismail
Ali Ismail
~ 2 years ago

I've tried doing this several times and keep getting this error:

A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.

It is while working on the column.jsx file. around 3min in. As soon as I add the droppableId="anything":

export default class Column extends React.Component { render() { return ( <Container> <Title>{this.props.column.title}</Title> <Droppable droppableId={this.props.column.id}> {this.props.tasks.map((task, index) => ( <Task key={task.id} task={task} index={index} /> ))} </Droppable> </Container> ); } }

Ali Ismail
Ali Ismail
~ 2 years ago

This is my codesandbox for this project. Please let me know if you find the root problem. https://codesandbox.io/s/o9yjz8jx1z

Dennis P
Dennis P
~ 2 years ago

I had the same error " react-dom.development.js:20781 Uncaught Error: Invariant failed: provided.innerRef has not been provided with a HTMLElement." -- Thanks Hector. Using 'ref' instead of 'innerRef' solved it for me.

Joel
Joel
~ 7 months ago

For anyone watching this tutorial now...

change: innerRef={provided.innerRef}
to: ref={provided.innerRef}

If not, you wont be able to drag the task items.

I just spent an unholy amount of time trying to figure this out...

Primata
Primata
~ 6 months ago

Hahaha that ref and innerRef :D

Alfred Ayache
Alfred Ayache
~ 2 months ago

I'm following along typing in the code myself (I should have access to the code as I'm an egghead member, but it's blocking me out), and it all seems to work, EXCEPT: moving tasks via keyboard. The video seems to show that moving them via keyboard even persists the new tasks list order. Has anyone else run into this issue?

Will Johnson
Will Johnson
~ 2 months ago

I'm following along typing in the code myself (I should have access to the code as I'm an egghead member, but it's blocking me out), and it all seems to work, EXCEPT: moving tasks via keyboard. The video seems to show that moving them via keyboard even persists the new tasks list order. Has anyone else run into this issue?

Would you happen to have a link to your code Alfred?