React sortable js is removing bootstrap grid style

Question

I am building a simple react app and I am trying to implement React Sortable Js to my bootstrap grid style. But When I wrap with <ReactSortable> then grid doesn't remain two boxes side by side in two row but it becomes one box in one line in four rows.

CodeSandBox :- My React App Codesandbox

App.js

function Card({ item }) {

  return (
    <div>
      <Col
        sm
        className="grid-view lrg-view"
      >
        <h5 style={{ textAlign: "center" }}>{item.name}</h5>
        <hr />
      </Col>
      <br />
      <br />
      <br />
      <br />
    </div>
  );
}

function App() {
  const [thirdGroup, setThirdGroup] = useState([
    { name: "Box 1", id: "1" },
    { name: "Box 2", id: "2" },
    { name: "Box 3", id: "3" },
    { name: "Box 4", id: "4" }
  ]);

  return (
    <Container>
      <Row>
        <ReactSortable
          list={thirdGroup}
          setList={setThirdGroup}
          animation={250}
        >
          {thirdGroup.map((item) => (
            <Card key={item.id} item={item} />
          ))}
        </ReactSortable>
      </Row>
    </Container>
  )

I have also tried by putting Row inside ReactSortable then It is showing grid but not sorting.

I am trying for hours and looked into many issues but it is still not working.

What I am trying to do

I am trying to put two boxes side by side in one row and then same for the second row. Like Grid Row in Bootstrap

ryeballar · Accepted Answer · 2022-10-08 06:26:34Z

1

There are several problems in your snippet.

The react-bootstrap Col component is required to be a direct child of the Row component for the grid layout to work. Since the direct child of the Row component in your snippet is the ReactSortable component, then it doesn't satisfy this requirement.
Your Card component should be the Col component instead of a div. This satisfies the requirement mentioned above.

To resolve the problem, we need the ReactSortable component to act as a Row component, using the tag property. You may refer to this part of the documentation for more info.

A working example on codesandbox:

import "./styles.css";
import { ReactSortable } from "react-sortablejs";
import { useState } from "react";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";

function Card({ item }) {
  let backgroundColor = "#dad9f3";

  return (
    <Col
      sm
      className="grid-view lrg-view"
      style={Object.assign({}, { backgroundColor })}
    >
      <h5 style={{ textAlign: "center" }}>{item.name}</h5>
      <hr />
    </Col>
  );
}

export default function App() {
  const [thirdGroup, setThirdGroup] = useState([
    { name: "Box 1", id: "1" },
    { name: "Box 2", id: "2" },
    { name: "Box 3", id: "3" },
    { name: "Box 4", id: "4" }
  ]);

  return (
    <Container>
      <ReactSortable
        tag={Row}
        list={thirdGroup}
        setList={setThirdGroup}
        animation={250}
      >
        {thirdGroup.map((item) => (
          <Card key={item.id} item={item} />
        ))}
      </ReactSortable>
    </Container>
  );
}

answered Oct 8, 2022 at 6:26

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xmas Over a year ago

Thank you very much, It was really helpful. And It worked But I also want to add <div className="col-1"></div> between every Col to add a little margin between the Cols so they don't attach to each other and When I wrap Card with <span></span> then It doesn't work as row

Xmas Over a year ago

And Also they aren't showing two in one row and two in another

ryeballar Over a year ago

You can simply use the column specifiers in the Col component, in this case, sm={6} since bootstrap has a 12 column max default. Kindly up-vote my answer as well, if it helped you, thanks.

Collectives™ on Stack Overflow

React sortable js is removing bootstrap grid style

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related