0

I am trying to implement functional component foir ItemDragging in Recatjs but not able to fully accomplish the goal. Getting some difficulties while implementing.

import React from "react";
import List, { ItemDragging } from "devextreme-react/list";
import { plannedTasks, doingTasks } from "./data.js";
class App extends React.Component {
constructor() {
super();
this.state = {
plannedTasks,
doingTasks
};
this.onDragStart = this.onDragStart.bind(this);
this.onAdd = this.onAdd.bind(this);
this.onRemove = this.onRemove.bind(this);
this.onReorder = this.onReorder.bind(this);
}
onDragStart(e) {
debugger;
e.itemData = this.state[e.fromData][e.fromIndex];
}
onAdd(e) {
debugger;
const tasks = this.state[e.toData];
this.setState({
[e.toData]: [
...tasks.slice(0, e.toIndex),
e.itemData,
...tasks.slice(e.toIndex)
]
});
}
onRemove(e) {
debugger;
const tasks = this.state[e.fromData];
this.setState({
[e.fromData]: [
...tasks.slice(0, e.fromIndex),
...tasks.slice(e.fromIndex + 1)
]
});
}
onReorder(e) {
debugger;
this.onRemove(e);
this.onAdd(e);
}
render() {
return (
<div className="widget-container">
   <List dataSource={this.state.plannedTasks} keyExpr="id">
      <ItemDragging
         allowReordering={true}
         group="tasks"
         data="plannedTasks"
         onDragStart={this.onDragStart}
         onAdd={this.onAdd}
         onRemove={this.onRemove}
         onReorder={this.onReorder}
         ></ItemDragging>
   </List>
   <List dataSource={this.state.doingTasks} keyExpr="id">
      <ItemDragging
         allowReordering={true}
         group="tasks"
         data="doingTasks"
         onDragStart={this.onDragStart}
         onAdd={this.onAdd}
         onRemove={this.onRemove}
         onReorder={this.onReorder}
         ></ItemDragging>
   </List>
</div>
);
}
}
export default App;

`find full example on below link

https://codesandbox.io/s/item-drag-drop-devextreme-list-forked-75gqk3

I am trying to implement above code in react in functional component,but facing some problems can someone please help to convert it into functional react component.

0 Answers0