react-beautiful-dnd throws error when ordering the second time

Question

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.

Answer 1

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.