React-beautiful-dnd dropping at different column not working

[mayyadanar]

This right here is the code implementing react-beautiful-dnd, I’ve implemented separate columns for weekly tasks and daily tasks. Everything works fine on weeklybox(reordering,dragging,dropping), however, when I dragged an item from weeklybox to dailybox, the console shows destination but the item wasn’t put into the dailybox even though that item actually disappeared from weeklybox

import React from 'react';
import taskList from "../static/tasks";
import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';

export default function Tasks() {


    const [WeeklytaskOrder,setWeeklyTaskOrder] = React.useState(taskList);
    const [DailytaskOrder, setDailyTaskOrder]= React.useState([]);


    const handleDragEnd= result => {
    const {destination,source} = result;
    console.log(result);
    if (!result.destination) return;
    
    if(source.droppableId===destination.droppableId) {
        const newTasks= Array.from(WeeklytaskOrder);
        const [reOrdered] = newTasks.splice(source.index, 1);
        newTasks.splice(destination.index, 0, reOrdered);
        setWeeklyTaskOrder(newTasks)
    }

    else {
        let weekList = WeeklytaskOrder
        let dailyList = DailytaskOrder
        if (source.droppableId === "tasket") {
          const removed = weekList.splice(source.index,1);
          dailyList.splice(destination.index, 0, removed);
          setWeeklyTaskOrder(weekList);
          setDailyTaskOrder(dailyList);

        } else {
          const removed = dailyList.splice(source.index,1);
          weekList.splice(destination.index, 0, removed);
          setWeeklyTaskOrder(weekList);
          setDailyTaskOrder(dailyList);
  
      }
  }
    
}
    


  return (
    <div className='tasker'>
        <DragDropContext onDragEnd={handleDragEnd}>
            <div className="container">
                <Droppable droppableId='tasket'>
                    {(provided) => (
                    <div className='weeklybox'
                    ref={provided.innerRef}
                    {...provided.droppableProps}>
                            <h3>Weekly Tasks</h3>
                            {WeeklytaskOrder.map(({id,item},index)=>{
                                return(
                                    <Draggable draggableId={id} key={id} index={index}>
                                        {(provided) => (
                                            <h5 className='task' 
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}>
                                                {item}
                                            </h5>
                                        )
                                            } 
                                    </Draggable>)
                                    
                            })}
                        {provided.placeholder}
                    </div>)}
                </Droppable>
                
                <Droppable droppableId="tasketer">
                    {(provided)=> (
                    <div className='dailybox'  ref={provided.innerRef} {...provided.droppableProps}>
                        <h3>Daily Target</h3>
                        {provided.placeholder}
                    </div>
                    
                     )}
                     
                </Droppable>
            </div>
        </DragDropContext>    
    </div>        
  )
}

const taskList = [
    
       {id:"1", item:"Learn Japanese"},
       {id:"2", item:"Develop personal portfolio"},
       {id:"3", item:"Develop E-commerce website"},
       {id:"4", item:"Workout for an hour"},
       {id:"5", item:"Finish reading a book"},
         
]

export default taskList;

.container {
   display:flex;
   justify-content: space-evenly;
   padding:1em 2em;
   align-items: center;
   height:350px;
}

.dailybox, .weeklybox {

    background-color: white;
    width: 30%;
    height:300px;
    box-shadow: 0 3px 7px rgb(65, 61, 61);
}

.weeklybox h3, .dailybox h3 {
    background-color:#25053a ;
    color:white;
    margin:0;
    text-align:center;
    padding:0.5em;
}


.task {
    padding:0.3em;
    box-shadow: 1px 5px 5px rgba(0,0,0,0.1);
    width: 100%;
    color:#25053a;
}

[bbsmooth]

Can you give us a link to your entire project?

[mayyadanar]

GitHub - noah-mydn/React: Some react projects that I'm working on

Github link for it. In the console, signin/signup components are not necessarily controlled right now. You can directly click signin without entering anything to get to scrumboard. In the scrumboard, after dropping and dragging items, you’ll see it works fine on its own column, but in the separate column, it actually passes data in the array (seen from console) but the data doesn’t show up in UI.

[mayyadanar]

IT WORKED NOW!
I forgot to map the second arrays to my dailybox div.

[fpregee]

I am having a similar issue, can you kindly share how you mapped the second array into your daily task div?

[fpregee]

import React, {useState} from 'react'
import taskList from '../../static/tasks';
import '../scrumboard/scrumboard.css';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

export default function Tasks() {
    const [taskRoll, updateTaskRoll] = useState(taskList) 

    const handleOnDragEnd = (result) => {
      if(!result.destination) return;
      const items = Array.from(taskRoll);
      const [reorderedItem] = items.splice(result.source.index, 1);
      items.splice(result.destination.index, 0, reorderedItem);

      updateTaskRoll(items);
    }


  return (
    <div className='tasker'>
        <DragDropContext onDragEnd={handleOnDragEnd}>
            <div className='container'>
                <Droppable droppableId="tasket">
                    {(provided) => (
                            <div className='weekly-box' {...provided.droppableProps} ref={provided.innerRef}>
                            <h3 className='back-ground'>Weekly Tasks</h3>
                            {taskRoll.map(({id, item}, index) => {
                              return (
                                <Draggable key={id} draggableId={id} index={index}>
                                  {(provided) => (
                                     <p className='task' ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} >
                                     {item}
                                   </p>
                                  )}
                                </Draggable>
                              )
                            })}
                            {provided.placeholder}
                            {/* <p id='box'>{this.state.tasks}</p> */}
                        </div>
                    )}     
                </Droppable>

                <Droppable droppableId="tasketer">

                    {(provided) => (
                        <div className='daily-box' {...provided.droppableProps} ref={provided.innerRef}>
                          <h3 className='back-ground'>Daily Target</h3>
                          
                          {provided.placeholder}
                        </div>
                    )}
                      
                </Droppable>
            </div>
        </DragDropContext>
         
    </div>
  )
}

[fpregee]

Please can you share how you mapped the second arrays to your dailybox div?

[mayyadanar]

I’m sorry I didn’t check the forum.
The solution is that create separate useState for dailybox, set it an empty array and just map it like weekbox. Inside onDragEnd, implement the function by comparing with droppableId.

const [DailytaskOrder, setDailyTaskOrder]= React.useState([]);

 const handleDragEnd= result => {
    const {destination,source} = result;
    console.log(result);
    if (!destination) return;
    
    if(source.droppableId===destination.droppableId) {
        if(source.droppableId==="weeklytasks"){
        const newWeeklyTasks= Array.from(WeeklytaskOrder);
        const [reOrdered] = newWeeklyTasks.splice(source.index, 1);
        newWeeklyTasks.splice(destination.index, 0, reOrdered);
        setWeeklyTaskOrder(newWeeklyTasks)}
        else {
            const newDailyTasks=Array.from(DailytaskOrder);
            const[reOrdered]=newDailyTasks.splice(source.index,1);
            newDailyTasks.splice(destination.index,0,reOrdered);
            setDailyTaskOrder(newDailyTasks);}
    }
    else {
        const weekList = assignTasks;
        const dailyList = DailytaskOrder;
        if (source.droppableId === "weeklytasks") {
          const  = weekList.splice(source.index,1);
          dailyList.splice(destination.index, 0, removed);
          setWeeklyTaskOrder(weekList);
          setDailyTaskOrder(dailyList);
        } else {        
          const  = dailyList.splice(source.index,1);
          weekList.splice(destination.index, 0, removed);
          setWeeklyTaskOrder(weekList);
          setDailyTaskOrder(dailyList);}
  }
    
}

[fpregee]

Thanks.
I Have already fixed it🙂