Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


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