При переборе выдает ошибку, почему?

Question

[depstor]

Добрый день, есть 3 компонента , почему падает ошибка??

компонент 1

import React, { useState } from 'react';
import { Form, Input, Button } from 'antd';
import style from '../../Index.module.scss';
import TodoList from '../TodoList/TodoList';


const App = () => {

const [todos, setTodos] = useState([]);

const onFinish = values => {
  const newTodoItem = {title: values.todoTitle, complete: false}
  const newTodos = [...todos, newTodoItem]
  setTodos(newTodos)
}

  return (
      <>
      <h1 className={style.title}>To-Do</h1>
    <Form
      name="basic"
      onFinish={onFinish}
      style={{ width: 200 }}
    >
      <Form.Item name="todoTitle">
        <Input />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Add
        </Button>
      </Form.Item>
    </Form>
    <TodoList/>
    </>
  );
};

export default App;

компонент 2

import React from 'react';
import { Checkbox } from 'antd';


const TodoItem = ({ item, index, onChange }) => {
    onChange = (event, currentIndex, todos, setTodos) => { 
        const value = event.target.checked
            const newItems = todos.map((res, index) => ({
                ...res,
                complete: currentIndex === index ? value : res.complete
            }));
            setTodos(newItems);
        }
return (
<h3 key={index}>
    <Checkbox checked={item.complete} onChange={(e) => onChange(e, index)} />
    { item.title }
</h3>
)

}
export default TodoItem ;

компонент 3

import React from 'react';
import TodoItem  from '../TodoItem/TodoItem';


const TodoList = ({ todos, onChange }) => {
    return (
      todos.map((res, index) => 
      <TodoItem 
      key={index} 
      item={res} 
      index={index} 
      onChange={onChange}/>)
    )
  }
export default TodoList;

вот какая ошибка падает

TypeError: Cannot read property 'map' of undefined

3 |
4 |
5 | const TodoList = ({ todos, onChange }) => {
> 6 | return (
7 | todos.map((res, index) =>
8 | 9 | key={index}

в чем причина ??? как это решить и больше не допускать ?

Answer 1

[Abr_ya]

Cannot read property 'map' of undefined
todos не приходит
Перед тем, как мапать, хорошо бы сделать проверку, что:
- это массив,
- массив не нулевой длины.

<TodoList/>
А где передача пропсов при вызове?

Comments

[depstor]

Спс , понял в чем беда )))