0

I have bean following the official tutorial for react-beautiful-dnd from egghead.io. On lesson 5 persisting the reordering my implementation throws all the time an error but only the second time when I try to reorder the top item. It works fine when I reorder the first time.

This is my branch specific to this question: https://github.com/bogdan-marian/my-react-beautiful-dnd/tree/002-property-id-question

The error that I get when I order the second time is: 

TypeError: Cannot read property 'id' of undefined
src/Column.js:31 

# and row 31 shows
<Task key={task.id} task={task} index={index} />)}

I'm not able to spot what is wrong with my implementation.

Vega
  • 27,856
  • 27
  • 95
  • 103
Bogdan Oloeriu
  • 183
  • 2
  • 11
  • After your operation, the `task` list seems just go empty, which let the `task` in `map` is not existing, which means it's `id` is also undefined. – keikai Feb 11 '20 at 06:17
  • @kikai this does not help. If you look at my update code it looks the same as the one if the course. From the error I can also see what react-beautiful-dnd thinks but when I debug, on the second drag the task.id value is set. – Bogdan Oloeriu Feb 11 '20 at 06:36

1 Answers1

0

I found the problem. There was a typo bug in my initialData.js

My second task had the id taks-2 instead of task-2. The columns on the other hand was set to point to the task-2. This is how initial data looked before the fix

const initialData = {
tasks: {
    'task-1': {id: 'task-1', content: 'Take out the garbage'},
    'task-2': {id: 'taks-2', content: 'Watch my favorite show'},
    'task-3': {id: 'task-3', content: 'Charge my phone'},
    'task-4': {id: 'task-4', content: 'Cook dinner'},
},
columns: {
    'column-1':{
        id:'column-1',
        title:'To do',
        taskIds:['task-1','task-2', 'task-3', 'task-4']
    }
},

// Facilitate reordering of the columns
columnOrder:['column-1']

}

All I had to do was to updated my second task id to task-2.

Bogdan Oloeriu
  • 183
  • 2
  • 11