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
There are several problems in your snippet.
The
react-bootstrap
Col
component is required to be a direct child of theRow
component for the grid layout to work. Since the direct child of theRow
component in your snippet is theReactSortable
component, then it doesn't satisfy this requirement.Your
Card
component should be theCol
component instead of adiv
. This satisfies the requirement mentioned above.To resolve the problem, we need the
ReactSortable
component to act as aRow
component, using thetag
property. You may refer to this part of the documentation for more info.A working example on codesandbox: