Reorder a List with react-beautiful-dnd

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.

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

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

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?

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

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

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

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.

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

Hahaha that ref and innerRef :D

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?

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?

When I completed this Lesson, my draggable items went back to their original positions. I opened your code sandbox, Alex, and the same thing occurs there. Could you take a look?

Even when I substitute my code with yours, I get the problem below. Is this a problem with versions?

A setup problem was encountered.> Invariant failed: provided.innerRef has not been provided with a HTMLElement.