🐛 Fix dev environment example code

Author: Clauderic Demers

index.js

@@ -5,50 +5,48 @@ import {SortableContainer, SortableElement, arrayMove} from './src/index';
 import range from 'lodash/range';
 import random from 'lodash/random';
 
-const Item = SortableElement((props) => {
-    return (
-        <div style={{
-            position: 'relative',
-            width: '100%',
-            display: 'block',
-            padding: 20,
-            borderBottom: '1px solid #DEDEDE',
-            boxSizing: 'border-box',
-            WebkitUserSelect: 'none',
-            height: props.height
-        }}>
-            Item {props.value}
-        </div>
-    )
-});
+const SortableItem = SortableElement(({height, value}) => (
+    <div style={{
+        position: 'relative',
+        width: '100%',
+        display: 'block',
+        padding: 20,
+        borderBottom: '1px solid #DEDEDE',
+        boxSizing: 'border-box',
+        WebkitUserSelect: 'none',
+        height: height
+    }}>
+        Item {value}
+    </div>
+));
 
-class List extends Component {
+const SortableList = SortableContainer(({items}) => (
+    <div>
+        {items.map(({height, value}, index) => <SortableItem key={`item-${index}`} index={index} value={value} height={height}/>)}
+    </div>
+));
+
+class Example extends Component {
     state = {
-        items: range(5000).map((value) => {
+        items: range(100).map((value) => {
             return {
                 value,
                 height: random(49, 120)
             };
         })
     };
-    onSortEnd = (previousIndex, newIndex) => {
+    onSortEnd = ({oldIndex, newIndex}) => {
         let {items} = this.state;
-        arrayMove(items, previousIndex, newIndex);
+        arrayMove(items, oldIndex, newIndex);
         this.setState({items});
     };
     render() {
         const {items} = this.state;
 
-        return (
-            <div>
-                {items.map((item, index) => <Item key={`item-${index}`} index={index} value={item}/>)}
-            </div>
-        );
+        return <SortableList items={items} onSortEnd={this.onSortEnd} />;
     }
 }
 
-const SortableList = SortableContainer(List);
-
-render(<SortableList />,
+render(<Example />,
   document.getElementById('root')
 )