import React, { useState } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import "./App.css"; import CircleInCircle from "../MiniComponents/CircleInCircle"; import Button from "../ButtonDesign/Button"; function Testt({ items, vod }) { // const [characters, updateCharacters] = useState(finalSpaceCharacters); const [characters, updateCharacters] = useState(items); const [activeAccordion, setActiveAccordion] = useState(null); function handleOnDragEnd(result) { if (!result.destination) return; const items = Array.from(characters); const [reorderedItem] = items.splice(result.source.index, 1); items.splice(result.destination.index, 0, reorderedItem); updateCharacters(items); } return (

Final Space Characters

{(provided) => (
{items.map((item, index) => ( {(provided) => (
{/* parent */}
setActiveAccordion( activeAccordion === item ? null : item ) } >

{item.title}

{vod && (

دقیقه: {item.min}

ویدیو: {item.video}

)}
{/* child */} {activeAccordion === item && item.subItems.map((subItem, i) => (
{vod === !true && ( line )} {i + 1}

{subItem.name}

{vod ? ( <>

دقیقه: {item.min}

) : ( <> delete-button edit-button )}
))} {provided.placeholder}
)}
))}
)}

Images from{" "} Final Space Wiki

); } export default Testt; Testt.defaultProps = { vod: false, items: [ { id: "gary", title: "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "kevin", title: "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "rafiqaneh", title: "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, ], };