Inflearn Community Q&A

List.js로 나눈 다음 data. 도 지우고 했는데 List.js에서 key={id} 부분에서 계속 오류가 발생합니다.

List.js:22 Uncaught TypeError: Cannot read properties of undefined (reading 'draggableProps')

at List (List.js:22:1)

at renderWithHooks (react-dom.development.js:16305:1)

at mountIndeterminateComponent (react-dom.development.js:20074:1)

at beginWork (react-dom.development.js:21587:1)

at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)

at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)

at invokeGuardedCallback (react-dom.development.js:4277:1)

at beginWork$1 (react-dom.development.js:27451:1)

at performUnitOfWork (react-dom.development.js:26557:1)

at workLoopSync (react-dom.development.js:26466:1)

Lists.js 코드

import React from 'react';
import { DragDropContext } from "react-beautiful-dnd";
import { Droppable } from "react-beautiful-dnd";
import { Draggable } from "react-beautiful-dnd";
import List from "./List";

export default function Lists({todoData, setTodoData}) {

    const handleEnd = (result) => {
        if(!result.destination) return;
        const newTodoData = todoData;

        const [reorderedItem] = newTodoData.splice(result.source.index, 1);
        newTodoData.splice(result.destination.index, 0, reorderedItem);
        setTodoData(newTodoData);
    };

    return (
        <div>
            <DragDropContext onDragEnd={handleEnd}>
                <Droppable droppableId="todo">
                    {(provided) => (
                        <div {...provided.droppableProps} ref={provided.innerRef}>
                            {todoData.map((data, index) => (
                                <Draggable key={data.id}
                                           draggableId={data.id.toString()}
                                           index={index}
                                >
                                    {(provided, snapshot) => (
                                        <List
                                            key={data.id}
                                            id={data.id}
                                            title={data.title}
                                            completed={data.completed}
                                            todoData={todoData}
                                            setTodoData={setTodoData}
                                            provided={provided}
                                            snapshot={snapshot}
                                        />
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </div>
                    )}
                </Droppable>
            </DragDropContext>
        </div>
    );
}

List.js 코드

import React from "react";

const List = ({
    id, title, completed, todoData, setTodoData, provided, snapshot
}) => {
    const handleClick = (id) => {
        let newTodoData = todoData.filter((data) => data.id !== id);
        setTodoData(newTodoData);
    };

    const handleCompleteChange = (id) => {
        let newTodoData = todoData.map((data) => {
          if(data.id === id) {
            data.completed = !data.completed;
          }
          return data;
        });
        setTodoData(newTodoData);
    };

    return (
        <div key={id}
            {...provided.draggableProps} 
            ref={provided.innerRef} 
            {...provided.dragHandleProps}
            className={`${
                snapshot.isDragging ? "bg-gray-400" : "bg-gray-100"} 
                flex items-center justify-between w-full px-4 py-1 my-2 text-gray-600 border rounded`}
        >
            <div className='items-center'>
                <input type="checkbox" 
                       onChange={() => handleCompleteChange(id)} 
                       checked={completed}
                />
                <span className={completed ? 'line-through' : undefined}>
                    {title}
                </span>
            </div>
            <div className='items-center'>
                <button 
                    className="px-4 py-2 float-right"
                    onClick={() => handleClick(id)}>
                    X
                </button>
            </div>
        </div>
    )
}

export default List;