human
React機能コンポーネント用の小さなコードスニペットを書いてください。2つのDivがあり、各divにはそれらの内部に複数のアイテムがあり、アイテムのソースは配列です。また、各アイテムは2つのdivの間にドラッグアンドドロップする必要がありますか？
gpt
Reactの機能コンポーネントのサンプルコードです。アイテムは配列から取得し、各アイテムは2つのdivの間でドラッグ＆ドロップできます：

```javascript
import React, { useState } from "react";

const App = () => {
  const [list1, setList1] = useState([
    { id: 1, text: "Item 1" },
    { id: 2, text: "Item 2" },
    { id: 3, text: "Item 3" }
  ]);
  const [list2, setList2] = useState([
    { id: 4, text: "Item 4" },
    { id: 5, text: "Item 5" }
  ]);

  const onDragStart = (event, source) => {
    event.dataTransfer.setData("source", source);
  };

  const onDrop = (event, target) => {
    const source = event.dataTransfer.getData("source");
    const sourceList = source === "list1" ? list1 : list2;
    const targetList = target === "list1" ? list1 : list2;
    const item = sourceList.find(i => i.id === Number(event.dataTransfer.getData("id")));

    setList1(source === "list1" && target === "list2" ? sourceList.filter(i => i.id !== item.id) : list1);
    setList2(source === "list2" && target === "list1" ? sourceList.filter(i => i.id !== item.id) : list2);
    targetList.push(item);

    target === "list1" ? setList1([...targetList]) : setList2([...targetList]);
  };

  return (
    <div className="container">
      <div
        className="list"
        onDrop={event => onDrop(event, "list1")}
        onDragOver={event => event.preventDefault()}
      >
        {list1.map(item => (
          <div
            key={item.id}
            className="item"
            draggable
            onDragStart={event => onDragStart(event, "list1")}
            data-id={item.id}
          >
            {item.text}
          </div>
        ))}
      </div>
      <div
        className="list"
        onDrop={event => onDrop(event, "list2")}
        onDragOver={event => event.preventDefault()}
      >
        {list2.map(item => (
          <div
            key={item.id}
            className="item"
            draggable
            onDragStart={event => onDragStart(event, "list2")}
            data-id={item.id}
          >
            {item.text}
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;
```