React-beautiful-dnd: Egghead course issue: "Reorder a List with react-beautiful-dnd"

[NickEmpetvee]

Update for future readers

Please see our Using inner Ref guide

You are likely experiencing some pain caused by changing from styled-components v3 to v4 where they changed innerRef to ref. We call this out on the egghead course notes as well as in the using inner ref guide.

Original issue:

Bug or feature request?

Bug, I think

Expected behavior

The code at the end of this module is supposed list all tasks in the column and they should be draggable.

Actual behavior

I get this error:

Error: Invariant failed: Cannot get draggable ref from drag handle
▶ 22 stack frames were collapsed.
Module../src/index.js
C:/mcdev/react/task-app/src/index.js:31
  28 |     }
  29 | }
  30 | 
> 31 | ReactDOM.render(<App />, document.getElementById('root'))

Steps to reproduce

Just run the code. It throws the error as soon as you save the file(s) and the site reloads.

What version of React are you using?

16.6

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

9.0.2

What browser are you using?

Chrome on Win 81

Demo

Here is the issue: https://codesandbox.io/s/wyxwwrx7yl.

[NickEmpetvee]

I resolved this by putting ref={provided.innerRef} before the innerRef in both the task and column objects based on a posting on the Egghead site. Would like to know why this is necessary for my configuration, if possible, before closing.

[Pajn]

You are using a newer major version of styled-components. In version 4 they changed to using forwardRef instead of a custom property https://www.styled-components.com/releases#v4.0.0

[NickEmpetvee]

Thanks @Pajn !

[alexreardon]

It would be worth calling this out in the egghead course

On Mon, 29 Oct 2018 at 09:40 NickEmpetvee [e-mail] wrote:

Closed #875 https://github.com/atlassian/react-beautiful-dnd/issues/875.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/875#event-1931009817,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7d9gTCimlMjeGDEeggf2BH3cetnsks5upjJJgaJpZM4X9tHG
.

[NickEmpetvee]

@alexreardon FYI, if using ref={provided.innerRef} without an innerRef tag at all with version 4 of styled-components, it works.

[alexreardon]

Yep thanks!
On Tue, 30 Oct 2018 at 7:16 pm, NickEmpetvee [e-mail]
wrote:

@alexreardon https://github.com/alexreardon FYI, if using
ref={provided.innerRef} without an innerRef tag at all with version 4 of
styled-components, it works.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/atlassian/react-beautiful-dnd/issues/875#issuecomment-434209705,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ACFN7TogV0J55nvZtI2ys3N4gjHJscUoks5uqArygaJpZM4X9tHG
.

[scottdixon-zz]

More info: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md

[savvysqrrl3]

I am not using styled components, I am using Less files, so I am wondering how to render my component without all the style wrappers and whether an inner ref is needed to make this work.

[NickEmpetvee]

@savvysqrrl3 Did you come to a resolution on that? I'd like to use this without styled components too.

[mrrogercampbell]

Having trouble with the egghead tutorial.

I have tried replacing innerRef with ref and forwardRef

Yet still returning the error
Error: Invariant failed: Cannot get draggable ref from drag handle

Also have a warning being thrown but cant seem to find the file the that needs to be replaced.
Replace text-decoration-skip: ink to text-decoration-skip-ink: auto, because spec had been changed

[savvysqrrl3]

I ended up not using styled components, since I had a deadline. Since I used LESS, I figure you would have to do an event handler like onMouseover or something like that.
I too had issues with the innerRef not working until I changed the order. You can see my solution at https://github.com/savvysqrrl3/fab_grid

[NickEmpetvee]

@rc1336 I compose it this way and it works:

            {provided => (
              <Container
                {...provided.droppableProps}
                ref={provided.innerRef}
              >

[skywalkerwin]

using ref={provided.innerRef} allows my tasks to be draggable, but as soon as I drag and change the order of a task, the order immediately reverts to what it was before...

[alexreardon]

@savvysqrrl3 you are welcome to use whatever styling approach you want. I would recommend you read our ref's guide.

the ref attribute on an element is a way of getting a pointer to the DOM element. We use this for collecting dimensions

[sebastianpennino]

I had the same issue and a deadline, my solution was simply to downgrade styled components to the version used on the tutorial (yarn add [email protected])

[jvcjunior]

How did u solve @skywalkerwin ?

[jvcjunior]

@skywalkerwin you need to use onDragEnd method to reorder your array. That's it!! :)