I couldn't move my list (or Column) like in trello? I tried every possible way...

[the-coding-pie]

the data which i am using

export const lists = [ { _id: "134343", name: "First list", pos: 90, }, { _id: "2234388855", name: "Second list", pos: 1, }, { _id: "3234235345", name: "Third list", pos: 2, }, { _id: "4323434343", name: "Fourth list", pos: 3, }, { _id: "535654", name: "Fifth list", pos: 4, }, { _id: "5356545", name: "Sixth list", pos: 43, }, ];

export const cards = [ { _id: "165434444", name: "How are you?", description: "", listId: "134343", pos: 0, }, { _id: "2234663", name: "Buy vegetables", description: "", listId: "2234388855", pos: 0, }, { _id: "33452233", name: "Buy Fruits", description: "", listId: "134343", pos: 1, }, { _id: "4453243234", name: "Buy Fruits", description: "", listId: "3234235345", pos: 1, }, { _id: "5004505", name: "Buy Fruits", description: "", listId: "535654", pos: 1, }, ];

App.js

`import React, { useState } from "react"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; import List from "./components/List"; import { lists, cards } from "./data"; import "./index.css";

const App = () => { const [data, setData] = useState({ lists: lists, cards: cards, });

const handleDragEnd = (result) => { const { source, destination, draggableId } = result; };

return (

{(provided, snapshot) => (

{data.lists.map((l, index) => { const cards = data.cards.filter((c) => c.listId === l._id); return ; })} {provided.placeholder}

)}

); };

export default App; `

List.js

`import React from "react"; import { Draggable, Droppable } from "react-beautiful-dnd"; import Card from "./Card";

const List = ({ list, index, cards }) => { console.log(list._id); return (

{(provided, snapshot) => (

{list.name}

{/* cards */} {(provided, snapshot) => { return (

{cards.map((c, i) => ( ))} {provided.placeholder}

); }}

)}

); };

export default List; `

Card.js

`import React from "react"; import { Draggable } from "react-beautiful-dnd";

const Card = ({ card, index }) => { console.log(card._id); return ( <Draggable key={card._id} draggableId={card._id + "dasfasf"} index={card.pos}> {(provided, snapshot) => { return ( <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} className={card border w-full p-2 mb-4 ${ snapshot.isDragging ? "bg-green-200" : "bg-white" }}

{card.name}

[the-coding-pie]