Stateless no longer possible?

[masbaehr]

In v. 1.5.1 i had the following code:

						<Sortable
                          options={{
                            group: 'shared',
                            forceFallback: true,
                            animation: 150
                          }}
                          tag="div"
                          style={{width: "100%"}}
                          onChange={(order, sortable, evt) => {
                            console.log(evt);
                            
                             if(evt.type === "add"){

                             }
                             if(evt.type === "update"){
                              
                            }
                          }}
                          >
                        {block.items.map((item, index) => {
                          return (
                            <div key={"item"+index}>
			     <span>item</span>
                            </div>
                          );
                        })}
                      </Sortable>

Now with <ReactSortable> there seems to be the "setList" which seems to be mandatory. Which makes it kinda impossible to use <ReactSortable> inside of a map or iteration. Any solution to this? Thanks

[waynevanson]

@masbaehr

React provides a declarative library that keeps the DOM in sync with your data. — react.js

It's made to have state only by design. If you don't want to use data, you should use Sortable directly or use vanilla javascript without react.

Have you read the docs? It will show you how to use it properly. Please download this repository and play around with the examples.

Iterating over the list is how you use it.

[masbaehr]

Ok - i know the point and surely you are right but this is something which was possible with 1.5.1 and now it is no longer :)

I have a pretty complex case where i need to render multiple sortable panels from a complex state whose number is not known before user interaction. So by limiting the "list" of a <ReactSortable> to be one exact state. So if "blocks" is a stateful component, with "items" being an array of objects inside of it, there is no way to update it properly..

I will investigate on whether it is possible to use plain Sortable JS for this, however the usage obviously is much harder.

Here's a full example of that use-case which worked perfectly with 1.5.1. Maybe you have a clever idea how to make it work with 2.x.

Note: To make it compatible to 2.x syntax change only the import and the options into separate properties of <ReactSortable>

import React, { useState, useEffect } from "react";
import { default as ReactSortable } from "react-sortablejs";

function SortableTest1(props) {
  //Note: The items can change via user-interaction during runtime
  const [blocks, setBlocks] = useState([
    {
      id: "b1",
      color: "#673AB7",
      items: [
        { id: "b1i1", name: "alpha" },
        { id: "b1i2", name: "beta" },
        { id: "b1i3", name: "gamma" }
      ]
    },
    {
      id: "b2",
      color: "#009688",
      items: [
        { id: "b2i1", name: "delta" },
        { id: "b2i2", name: "omega" },
        { id: "b2i3", name: "zeta" }
      ]
    }
  ]);

  useEffect(() => {}, []);

  return (
    <React.Fragment>
      <div>
        {blocks.map((block, blockindex) => {
          return (
            <ReactSortable
              options={{
                group: "shared",
                forceFallback: true,
                animation: 150
              }}
              tag="div"
              style={{ width: "100%", background: "wheat", textAlign: "center" }}
              onChange={(order, sortable, evt) => {
                console.log("Don't worry i'll handle the correct placement myself here!");
                console.log(evt.type);
              }}>
              {block.items.map((item, index) => {
                return (
                  <div key={"item" + index} style={{ display: "inline-block", background: block.color, color: "white", padding: 10, margin: 10, minWidth: 300 }}>
                    <span>{item.name}</span>
                  </div>
                );
              })}
            </ReactSortable>
          );
        })}
      </div>
    </React.Fragment>
  );
}

export default SortableTest1;