Tapage/components/editCustomQuestions.tsx

import { useState } from 'react'
import { IconSquareX } from '@tabler/icons-react'

export default function EditCustomQuestions({dataRef, questionList = [], setQuestions}: any){
  let questionTemp = questionList
  console.log(questionTemp)
  const [forceUpdate, setForceUpdate] = useState(0)

  function addQuestion(){
    questionTemp.push({text: "", type:"text"})
    setForceUpdate(oldFu => oldFu + 1)
  }

  function removeQuestion(index: number){
    questionTemp.splice(index, 1)
    setForceUpdate(oldFu => oldFu + 1)
  }

  return <>
  <dialog ref={dataRef} className="modal">
    <div className="modal-box flex flex-col space-y-8">
      <h3 className="font-bold text-lg">Edit custom questions!</h3>
      <div className="flex flex-col space-y-4">
      { questionTemp.map((question: any, index: number) => {
        return(
          <div className="flex flex-row space-x-4" key={index}>
            <input type="text" className="input input-bordered w-full max-w-xs" placeholder="Question" defaultValue={question.text} onChange={(e) => {questionTemp[index].text = e.target.value}}/>
            <select onChange={(e) => {questionTemp[index].type = e.target.value}} className="select select-bordered w-24 max-w-xs">
              <option>Text</option>
              <option>Photo</option>
            </select>
            <IconSquareX onClick={() => removeQuestion(index)} className="w-12 h-12"/>
          </div>
        )
      })}
      </div>
      <button className="btn btn-primary" onClick={addQuestion}>Add question</button>
      <div className="modal-action">
        <form method="dialog">
          {/* if there is a button in form, it will close the modal */}
          <button className="btn" onClick={() => setQuestions(questionTemp)}>Save</button>
        </form>
      </div>
    </div>
  </dialog>
</>
}