【React】react-beautiful-dndの記述方法

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

react-beautiful-dndの記述方法

Reactで、react-beautiful-dndを使用する際には、以下のように記述します。

App.jsx

import {useState} from 'react';
import {DragDropContext, Draggable, Droppable} from 'react-beautiful-dnd';
import './App.css';

function App() {
  const [items] = useState([
    {id: 0, text: "item0"},
    {id: 1, text: "item1"},
    {id: 2, text: "item2"},
  ])
  const onDragEnd = (result) => {
    const remove = items.splice(result.source.index, 1);
    console.log(remove);
    items.splice(result.destination.index, 0, remove[0]);
  };
  return (
    <div className="dragDropArea">
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId='doroppable'>
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable draggableId={item.text} index={index} key={item.id}>
                {(provided) =>
                  <div
                  className='item'
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                  >
                    {item.text}
                  </div>
                }
              </Draggable>
            ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

export default App;