Multiple value in reactjs drag and drop - reactjs

Question

i have a drag and drop with multiple array in that card, but when i added new value inside the card the value added in all card, someone can help me how to the fix this?
the code like this:
import * as Style from '#/components/Form/FormStyle'
import { confirm } from '#/components/Modals/Confirmation'
import dynamic from 'next/dynamic'
import { useCallback, useEffect, useState } from 'react'
import { Trash2 } from 'react-feather'
import { useList } from 'react-use'
import { QuestionCard } from './QuestionCard'
import update from 'immutability-helper'
import { DragVertical, Plus } from '#/components/Icons'
type TermType = {
id: number
name: string
correct: boolean
}
const DefaultQuestion: { id: number; question?: string; placeholder?: string; term: any[] } = {
id: 1,
question: '',
placeholder: '',
term: []
}
const MDEditor = dynamic<any>(() => import('#/components/Form/MDEditor/withNoValue').then((fn) => fn.MDEditor), {
ssr: false
})
export const MultipleAnswer = ({ data }: { data?: any }) => {
const [term, { set: setTerm, updateAt: updateTermAt, removeAt: removeTermAt }] = useList<TermType>()
const [cards, { set: setCards, updateAt: updateCardsAt, removeAt: removeCardsAt }] = useList<typeof DefaultQuestion>()
const handleAddTerm = () => {
const newId = term?.slice(-1)[0]?.id ? term?.slice(-1)[0]?.id + 1 : 1
setTerm([...term, { id: newId, name: `Kolom jawaban ${newId}`, correct: false }])
}
const handleChangeTerm = (index: number, value: string) => {
updateTermAt(index, { ...term[index], name: value })
}
const handleDeleteTerm = async (id: number) => {
const confirmed = await confirm('Apakah anda yakin ingin menghapus pertanyaan ini?', 'Batal', 'Hapus')
if (confirmed) {
removeTermAt(id)
}
}
const [titles, setTitles] = useState<{ [id: string]: string }>({
1: 'Opsi 1',
2: 'Opsi 2',
3: 'Opsi 3',
4: 'Opsi 4'
})
const moveCard = useCallback(
(dragIndex: number, hoverIndex: number) => {
if (!cards) return
const dragCard = cards[dragIndex]
setCards(
update(cards, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragCard]
]
})
)
},
[cards]
)
const handleAdd = () => {
const newId = cards?.slice(-1)[0]?.id ? cards?.slice(-1)[0]?.id + 1 : 1
const newTermId = cards?.slice(-1)[0]?.term?.slice(-1)[0]?.id || 0
const collectIdxBefore = DefaultQuestion.term.map((term, i) => {
const index = i === 0 ? 1 : i + 1
return { ...term, id: newTermId + index }
})
const createTitles = {
[newTermId + 1]: 'Opsi 1',
[newTermId + 2]: 'Opsi 2',
[newTermId + 3]: 'Opsi 3',
[newTermId + 4]: 'Opsi 4'
}
setCards([...cards, { id: newId, term: [...collectIdxBefore] }])
setTitles({ ...titles, ...createTitles })
}
useEffect(() => {
if (data) {
setCards(data?.question)
}
}, [data])
const [isDesktop, setIsDesktop] = useState(false)
useEffect(() => {
const handleResize = () => {
if (window.innerWidth > 768) {
setIsDesktop(true)
} else {
setIsDesktop(false)
}
}
handleResize()
window.addEventListener('resize', handleResize)
return () => window.removeEventListener('resize', handleResize)
}, [])
const renderCard = (card: typeof DefaultQuestion, index: number) => {
const handleDelete = async (id: number) => {
const confirmed = await confirm('Apakah anda yakin ingin menghapus pertanyaan ini?', 'Batal', 'Hapus')
if (confirmed) {
removeCardsAt(id)
// remove also titles
cards[id].term.forEach((term) => {
delete titles[term.id]
})
}
}
const handleChange = (idx: number, idTerm: number, checked: boolean, termIndex: number) => {
const changedTerm = { ...cards[idx], term: [...cards[idx].term] }
changedTerm.term[termIndex] = { id: idTerm, name: titles?.[idTerm], correct: checked }
updateCardsAt(idx, changedTerm)
}
return (
<QuestionCard key={card.id} index={index} id={card.id} moveCard={moveCard} data-questions>
<div tw="flex justify-center mb-8">
<button tw="flex items-center space-x-3 text-sm text-gray-600 focus:outline-none">
<DragVertical />
<span>Urutkan</span>
</button>
</div>
<MDEditor label="Pertanyaan" defaultValue={data?.question?.[0]?.question} data-question />
<input type="hidden" value="radio" data-type />
<Style.InputGroup mobile={isDesktop ? false : true} tw="mt-5 !flex md:!grid">
<label tw="self-start md:text-right w-28">Jawaban</label>
<div tw="flex flex-col space-y-3">
{term?.map((term, i) => (
<div
key={Math.random()}
tw="relative flex items-center justify-between px-5 py-1 space-x-5 bg-gray-100 rounded-lg"
data-term>
<div tw="flex items-center">
<input
type="text"
defaultValue={term?.name}
tw="max-w-xs bg-transparent border-none focus:outline-none"
onBlur={(evt) => handleChangeTerm(i, evt.target.value)}
style={{ boxShadow: 'none' }}
/>
</div>
<button type="button" onClick={() => handleDeleteTerm(i)}>
<Trash2 width={18} tw="text-gray-600" />
</button>
</div>
))}
<div>
<button
type="button"
onClick={() => handleAddTerm()}
tw="inline-flex text-sm text-left text-secondary hover:underline">
Tambah Opsi
</button>
</div>
</div>
</Style.InputGroup>
<div tw="flex justify-end mt-5">
<button
type="button"
onClick={() => handleDelete(index)}
tw="flex items-center space-x-1 text-gray-400 hover:text-primary">
<Trash2 strokeWidth={1} width={20} />
<span tw="text-sm font-light">Hapus</span>
</button>
</div>
</QuestionCard>
)
}
return (
<div tw="flex flex-col space-y-5">
{cards?.map((card, i) => renderCard(card, i))}
<button
type="button"
tw="flex items-center justify-center w-full py-3 space-x-3 bg-white border border-dashed text-primary border-primary hover:bg-gray-100"
onClick={() => handleAdd()}>
<Plus />
<span tw="font-semibold">Tambah Pertanyaan</span>
</button>
</div>
)
}
the result with error like this:
https://streamable.com/f8l8qs
the firts of error is when i added the new opsi the value added to more card, same when i delete it, there detele all value in card