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> </> }