попытка сделать sortable-hoc: получилось на 50%

React/CodePen/src/App.css

@@ -5,6 +5,9 @@
 }
 
 
+.headerBlock{
+	border:1px solid black;	
+}
 
 .headerBlock2{
 	position: "relative";

React/CodePen/src/actions/actionSetAvatar.js

@@ -1,5 +1,5 @@
-import { actionPromise } from "./actionPromise";
-import { ava } from "./requests";
+import {actionPromise} from "./actionPromise";
+import {ava} from "./requests";
 
 export const actionSetAvatar = (id) => async (dispatch, getState) => {
     return await dispatch(actionPromise("setAvatar", ava(getState()?.auth?.payload?.sub?.id, id)));

React/CodePen/src/components/snippet.js

@@ -1,11 +1,39 @@
-import {useRef, useState} from "react";
-import {connect} from "react-redux";
-import {Redirect} from "react-router";
-import {useEffect} from "react";
-import Editor from "./editor";
-import {actionSnippetAdd} from "../actions/actionSnippetAdd";
-
-const Snippets = ({onSave}) => {
+import {useRef, useState}   from "react";
+import React from 'react'
+import {connect}            from "react-redux";
+import {Redirect}           from "react-router";
+import {render}             from 'react-dom';
+import {useEffect}          from "react";
+import Editor               from "./editor";
+import {actionSnippetAdd}   from "../actions/actionSnippetAdd";
+
+import {sortableContainer, sortableElement,  arrayMove} from 'react-sortable-hoc';
+
+
+
+const SortableItem = sortableElement(({value}) => <li>{value}</li>);
+
+const SortableContainer = sortableContainer(({children}) => {
+  return <ul>{children}</ul>;
+});
+
+
+const Sortable = ({render:Tag}) => {
+  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'])
+  useEffect((oldIndex, newIndex)=>{
+    setItems(items=> arrayMove(items, oldIndex, newIndex))
+  },[items])
+
+  return (
+      <Tag >
+        {items.map((value, index) => (
+          <SortableItem key={`item-${value}`} index={index} value={value} />
+        ))}
+      </Tag>
+  )
+}
+
+const Snippets = ({onSave, render:Tag}) => {
     const [files, setFiles] = useState([
         {type: "html", text:`
 <div id='area'>⚠ achtung ⚠</div> 
@@ -99,6 +127,8 @@ bluek.onclick = () => {
 
   return (
     <div>
+        <Sortable render={SortableContainer} />
+
         <iframe srcDoc={srcDoc} title="output" sandbox="allow-scripts" frameBorder="0" width="95%"
                 height="100%" style={{height: "280px", marginLeft: "2%",marginTop: "10px", border: "5px solid green"}}/>