Error Uncaught TypeError: Cannot read properties of undefined (reading 'map') how to fix?

Question

React

Hello, I can’t find an error in the code, the console gives Uncaught TypeError: Cannot read properties of undefined (reading 'map')

import React, {useState} from 'react';
import style from "../../Components/Boards/Board.module.css"

const Todos = () => {
    const [boards, setBoards] = useState([
        {id: 1, title: "Сделать", items: [{id: 3, title: "Пойти в магазин"}, {id: 4, title: "Пойти в магазин"}]},
        {
            id: 2,
            title: "Проверить",
            items: [{id: 8, title: "Пойти в магазин"}, {id: 9, title: "Пойти в магазин"}, {
                id: 5,
                title: "Пойти в магазин"
            }]
        },
        {id: 3, title: "Сделано", items: [{id: 7, title: "Пойти в магазин"}]}
    ])

    const [currentBoard, setCurrentBoard] = useState(null)
    const [currentItem, setItem] = useState(null)



    function dragOverHandler(e) {
        e.preventDefault()

        if (e.target.className == "item") {
            e.target.style.boxShadow = '0 2px 3px black'
        }
    }

    function dragLeaveHandler(e) {
        e.target.style.boxShadow = 'none'
    }

    function dragStartHandler(e, board, item) {
        setCurrentBoard(board)
        setItem(item)
    }

    function dragEndHandler(e) {
        e.target.style.boxShadow = 'none'
    }

    function dragHandler(e, board, item) {
        e.preventDefault()
        const currentIndex = currentBoard.items.indexOf(currentItem)
        currentBoard.items.splice(currentIndex, 1)

        const dropIndex = board.items.indexOf(item)
        board.items.splice(dropIndex + 1, 0, currentItem)

        setBoards(board.items.map(b => {
            if (b.id === board.id) {
                return board
            }
            if (b.id === currentBoard.id) {
                return currentBoard
            }
            return b

        }))
    }



    return (
        <div className={style.board}>
            {boards.map((boarder, index) =>
                <div className={style.board_items}>
                    <div className="board__header">
                        {boarder.title}
                    </div>

                    <div className="board__items">
                        {boarder.items.map((item, index) => {
                                return <div
                                    onDragOver={event => dragOverHandler(event)}
                                    onDragLeave={event => dragLeaveHandler(event)}
                                    onDragStart={event => dragStartHandler(event, boarder, item)}
                                    onDragEnd={event => dragEndHandler(event)}
                                    onDrag={event => dragHandler(event, boarder, item)}
                                    draggable={true} className="item">{item.title}</div>
                            }
                        )}
                    </div>
                </div>
            )}
        </div>
    );
};

export default Todos;

Answer 1

Look closely - you've made a lot of mistakes.