Reorder a List with react-beautiful-dnd
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
refcallback 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
innerRefcallback for your components to return the underlying DOM reference of the component