Go ProSign in

    Reorder a List with react-beautiful-dnd

    Alex ReardonAlex Reardon

    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

    You must be a Member to view code