How to run 'modern usage'?

[hantc]

Can't find out how to run sorting using 'modern usage' from docs

import React from 'react';
import { SortableContainer } from 'react-anything-sortable';

class SortableItem extends React.Component {
  render() {
    return (
      <SortableContainer>
        <div>
          your item
        </div>
      </SortableContainer>
    );
  }
};

is there any piece of important information missing? thanks

[w3nda]

A sortable container is a wrapper for an Item.
you need to wrap it with Sortable.
which you can get via:

import Sortable, { SortableContainer } from 'react-anything-sortable';

<Sortable>
    <SortableContainer>
        <div> Your Item. </div>
    </SortableContainer>
</Sortable>

[Darmody]

@hantc you should add @sortable to SortableItem component

What I said is wrong.

You shouldn't wrap SortableContainer in the SortableItem. You should put <SortableContainer> outside your own item.