javascript - How to implement drag&drop for a to do list build with encapsulation in react? -

i made app add,edit , delete functions , implement drag&drop. far used lodash library. what's best library use ? made multiple classes project , don't know how can implement drag&drop. can me tips , explanations ?

in app.js render whole list , create methods each action.

in todolist.js render each element list 1 1.

in todolistitem.js create list items , click handle events.

in createtodo.js check input errors , create 1 todo.

here's code:

app.js

import react, {component} 'react'; import todolist './todolist'; import createtodo './createtodo'; import _ 'lodash'; const todos=[];   export default class app extends component {    constructor(props) {         super(props);          this.state = {             todos         };     }      render() {         return (             <div>                 <h1>react todos app</h1>                 <createtodo todos={this.state.todos} createtask={this.createtask.bind(this)} />                 <todolist                     todos={this.state.todos}                     toggletask={this.toggletask.bind(this)}                     savetask={this.savetask.bind(this)}                     deletetask={this.deletetask.bind(this)}                     onsortend={this.onsortend}                 />             </div>         );     }      toggletask(task) {         const foundtodo = _.find(this.state.todos, todo => todo.task === task);         foundtodo.iscompleted = !foundtodo.iscompleted;         this.setstate({ todos: this.state.todos });     }      createtask(task) {         this.state.todos.push({             task         });         this.setstate({ todos: this.state.todos });     }      savetask(oldtask, newtask) {         const foundtodo = _.find(this.state.todos, todo => todo.task === oldtask);         foundtodo.task = newtask;         this.setstate({ todos: this.state.todos });     }      deletetask(tasktodelete) {         _.remove(this.state.todos, todo => todo.task === tasktodelete);         this.setstate({ todos: this.state.todos });     } } 

todolist.js

import _ 'lodash'; import react,{component} 'react'; import todolistitem './todolistitems';  export default class todolist extends component {  renderitems(){     const props= _.omit(this.props,'todos');    return _.map(this.props.todos, (todo, index) => <todolistitem key={index} {...todo} {...props}/>);  }   render() {    return (<table>     <tr>         {this.renderitems()}     </tr>     </table>);  } } 

todolistitem.js

import react,{component} 'react';  export default class todolistitem extends component {   constructor(props) {         super(props);          this.state = {             isediting: false         };     }      rendertasksection() {         const { task, iscompleted } = this.props;          const taskstyle = {             color: iscompleted ? 'black' : 'black',             cursor: 'pointer'         };          if (this.state.isediting) {             return (                 <td>                     <form onsubmit={this.onsaveclick.bind(this)}>                         <input type="text" defaultvalue={task} ref="editinput" />                     </form>                 </td>             );         }          return (             <td style={taskstyle}                 onclick={this.props.toggletask.bind(this, task)}             >                 {task}             </td>         );     }      renderactionssection() {         if (this.state.isediting) {             return (                 <td>                     <button onclick={this.onsaveclick.bind(this)}>save</button>                     <button onclick={this.oncancelclick.bind(this)}>cancel</button>                 </td>             );         }          return (             <td>                 <button onclick={this.oneditclick.bind(this)}>edit</button>                 <button onclick={this.props.deletetask.bind(this, this.props.task)}>delete</button>             </td>         );     }      render() {         return (             <tr>                 {this.rendertasksection()}                 {this.renderactionssection()}             </tr>         );     }      oneditclick() {         this.setstate({ isediting: true });     }      oncancelclick() {         this.setstate({ isediting: false });     }      onsaveclick(event) {         event.preventdefault();          const oldtask = this.props.task;         const newtask = this.refs.editinput.value;         this.props.savetask(oldtask, newtask);         this.setstate({ isediting: false });     }  } 

createtodo.js

import react,{component} 'react'; import _ 'lodash'; import {sortablecontainer, sortableelement, arraymove} 'react-sortable-hoc';   export default class createtodo extends component { constructor(props){     super(props);      this.state ={         error: null     }; }  rendererror(){         if(!this.state.error) {             return null;         }          return <div style={{ color:'red '}}>{this.state.error} </div> }   render() {       return (           <form onsubmit={this.handlecreate.bind(this)}>            <input type="text"  placeholder="task" ref="createinput"/>            <button>add</button>            {this.rendererror()}            </form>       )   }   handlecreate(e){      e.preventdefault();          const createinput = this.refs.createinput;         const task = createinput.value;         const validateinput = this.validateinput(task);          if (validateinput) {             this.setstate({error: validateinput});             return;         }          this.setstate({error: null});        this.props.createtask(task);        this.refs.createinput.value='';   }   validateinput(task){      if (!task) {          return 'please enter task.';      }      else if (_.find(this.props.todos, todo=>todo.task === task)){          return 'text alrdy exists.';      }      return null;  } }