How to update the todo list item in reactjs? - reactjs

Question

I am using react and redux to write a todolist app.
Here is my initial state:
export const initialState = {
todoList:[
{
taskId:1
task: 'gym'
completed: true
},
{
taskId:2
task: 'buy dinner'
completed: false
}
]
}
const todoReducer = (state=initialState,action) => {
switch(action.type){
case UPDATE_TODO:
return Object.assign({}, state, {
todoList: state.todoList.map(todo =>
{
return todo.taskId === action.payload.taskId ?
Object.assign({},todo, {
task: action.payload.task,
completed: action.payload.completed
}) : todo
}
)
})
default:
return state;
}
}
export default todoReducer;
If I want to update the second task to 'buy book' and change completed to true, how can I add code in my reducer? The code above is not working now. Not sure the reason. Could anyone help?

Answer 1

Try this:
reducer
const initialState = {
todoList: [
{
taskId: 1,
task: "gym",
completed: true
},
{
taskId: 2,
task: "buy dinner",
completed: false
}
]
};
const todoReducer = (state = initialState, action) => {
switch (action.type) {
case 'UPDATE_TODO':
const { payload } = action;
return {
...state,
todoList: state.todoList.map(item => {
if (item.taskId === payload.taskId) {
return {
...item,
task: payload.task,
completed: payload.completed
};
} else {
return item;
}
})
};
default:
return state;
}
};
Unit test:
const output = todoReducer(initialState, {type: 'UPDATE_TODO', payload: {
taskId: 1,
task: "newTask",
completed: true
}});
console.log('output', output);
test output:
output { todoList:
[ { taskId: 1, task: 'newTask', completed: true },
{ taskId: 2, task: 'buy dinner', completed: false } ] }