CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Iman Jalali
Iman Jalali

Reputation: 139

Add Todo in Redux, cannot read property Symbol(Symbol.iterator)

I'm going to add an object to the array, the second time I want to add another object the whole array becomes number one and I end up with an error, my goal is to add a task to program Todo with Redux.

I also get this errors:

TypeError: Cannot read property 'length' of undefined
TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))

//todoReducer.js

import {ADD_TODO} from '../Actions/Todo';

const initialState = {
  todos:[],
};


const handleAddTodo = (state, action) => {
  const {todos} = state;
 
  const newTodo =[...todos, {
    id: todos.length + 1,
    text: action.title,
    isComplete: false,
  }]
  return (
    todos.push(newTodo)
  )
}

export default function todoRDS(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return handleAddTodo(state, action)
    default:
      return state
  }

}

Upvotes: 0

Views: 366

Answers (2)

Yunus Emre
Yunus Emre

Reputation: 125

export default function todoRDS(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {...state, todos: [...state.todos, { id: state.todos.length +1, title: action.title, isComplete: false }] }
    default:
      return state
  }

}

state is unmutable in react and redux you need to create a new state with old state values and add your new todo inside that new object. If you still want to use handeAddTodo try this:

const handleAddTodo = (state, action) => { return {...state, todos: [...state.todos, { id: state.todos.length +1, title: action.title, isComplete: false }] } }

Upvotes: 1

Omar Sy
Omar Sy

Reputation: 496

Change your return function you return wrong value. You need to return the state

const handleAddTodo = (state, action) => {
  const {todos} = state;
 
  return {
...state,
todos: [...todos, {
    id: todos.length + 1,
    text: action.title,
    isComplete: false,
  }]
}
}

Upvotes: 1

Related Questions