Array is not iterable in useReducer()

Question

To practice React hooks I wrote a simple todo site with ReactTS. I faced a problem that I keep receiving an error that my todos array is not iterable, despite it is defined as TodoProps[] in State type

Error occurs logically after 'add' button click

Error: state.todos is not iterable

If I write console.log(state.todos) I receive undefined

I checked code on medium and it seems to be identical to mine, but anyway I cannot resolve this issue.

(Error place marked in code)

TodoProps:

export interface TodoProps {
      title: string
      id: number
      todoKey?: number
      completed: boolean
}

LayoutContext.tsx:

import { createContext, useState, ReactNode } from 'react'

export const TodoListContext = createContext<any>({})
export const TitleContext = createContext<any>({})

type LayoutContextProps = {
      children: ReactNode
}

export const LayoutContext = ({ children }: LayoutContextProps): JSX.Element => {
      const [title, setTitle] = useState<string>('')
      const [todoList, setTodoList] = useState<object[]>([
            {title: 'Todo 1', id: 418759},
            {title: 'Todo 2', id: 440123}
      ])

      return (
            <TitleContext.Provider value={{ title, setTitle }}>
                  <TodoListContext.Provider value={{ todoList, setTodoList }}>
                        {children}
                  </TodoListContext.Provider>
            </TitleContext.Provider>
      )
}

Layout.tsx:

import { Button, Todos, Input } from 'Components'
import { LayoutContext } from 'Context/LayoutContext'
import cn from 'classnames'
import styles from './Layout.module.scss'

export const Layout = (): JSX.Element => {
      return (
            <section className={cn(styles.layout)}>
                  <LayoutContext>
                        <Todos/>
                        <Input/>
                        <Button>Add</Button>
                  </LayoutContext>
            </section>
      )
}

Button.tsx:

import styles from './Button.module.scss'
import { ButtonHTMLAttributes, DetailedHTMLProps, ReactNode, useReducer, useContext, useEffect } from 'react';
import { TodoListContext, TitleContext } from '../../Context/LayoutContext';
import { TodoProps } from 'Components/TodoComponent/Todo';

interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
      children: ReactNode
}

export const Button = ({ children }: ButtonProps): JSX.Element => {
      const { todoList } = useContext(TodoListContext)
      const { title, setTitle } = useContext(TitleContext)

      type State = { todos: TodoProps[] }

      type Action = { type: 'addTodo', payload: string }

      const reducer = (state: State, action: Action) => {
            switch (action.type) {
                  case 'addTodo':
                        const newTodoCard: TodoProps = { 
                              title: action.payload,
                              id: Math.floor(Math.random() % 10),
                              completed: false
                        }

                        console.log(todoList)
                        console.log(state.todos)

                        return { 
                                     Error here
                                     \/\/\/\/\/\/\/\/\/\/\/\/\/\/
                              todos: [...state.todos, newTodoCard]
                                     /\/\/\/\/\/\/\/\/\/\/\/\/\/\ 
                        }
            }
      }

      const [state, dispatch] = useReducer(reducer, todoList)

      const handleAdd = (e: any) => {
            e.preventDefault()

            dispatch({ type: 'addTodo', payload: title})
            setTitle('')
      }

      return (
            <button
                  type='submit'
                  onClick={handleAdd}
                  className={styles.button}
            >{children}</button>
      )
}

Don't know if I can add any more information..

Your initial state is `todoList`, which is an array, not an object with a key of `todos`. — Andy Ray, Feb 26 '23 at 20:14

score 3 · Accepted Answer · answered Feb 26 '23 at 20:14

3

You are passing an array to the initial state into your reducer and accessing it as an object in your reducer so you just need to change these lines

from

const [state, dispatch] = useReducer(reducer, todoList)

To

const [state, dispatch] = useReducer(reducer, { todos: todoList });

and you are good to go.

answered Feb 26 '23 at 20:14

Nisharg Shah

16,638
10
62
73

Could you please help with this question https://stackoverflow.com/questions/75570226/on-click-during-navigate-the-viewcount-values-is-still-0 – soccerway Feb 26 '23 at 22:43

Array is not iterable in useReducer()

1 Answers1