Не меняется массив при drag react?

Question

[Артём Белых]

Не меняется массив при drag

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

const Board = ({title, board, boards, currentBoard, currentItem, setCurrentBoard, setItem, setBoards}) => {

    // console.log(title)

    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(boards.map(b => {
            if (b.id === board.id) {
                return board
            }
            if (b.id === currentBoard.id) {
                return currentBoard
            }
            return b

        }))
    }

    return (
        <div>
            <div className="board__header">{title}</div>

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

export default Board

Это компонента Boards(где выводятся все доски, их пока что 3 и пока что они в локальном стейте)

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

const Boards = () => {
    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)
    return (
        <div className={style.board}>
            {boards.map((board, index) =>
                <div className={style.board_items}>
                    <Board
                        title={board.title}
                        board={board}
                        boards={boards}
                        setBoards={setBoards}
                        currentBoard={currentBoard}
                        setCurrentBoard={setCurrentBoard}
                        setItem={setItem}
                        currentItem={currentItem}/>
                </div>
            )}

        </div>
    );
};

export default Boards;

В функции dragHandler при drag ничего не работает, видимо не правильно передаётся параметр(Я пытаюсь сделать аналог Trello доски)
Как правильно перенести массив? Помогите разобраться!

Answer 1

[GlazOtca]

Я в прошлом ответе вам посоветовал посмотреть внимательно и сверить свой код с тем что в видеотуториале. Не пойму, у вас косоглазие или экран мутный, или что вам мешает? Я все проделал один в один и у меня всё работает!
Функция которую вы назвали dragHandler, на самом деле называется dropHandler и вешается она не на событие onDrag, а на событие onDrop!!!