Home > Net >  Cannot call a function from iterated part of html in react
Cannot call a function from iterated part of html in react

Time:08-22

I have a code where I am looping through elements in an array in reactjs. For each element I have a delete button, which should remove the element from the db. When compiling, the code throws the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')

Here is my jsx:

{(zakazani.map((termin, key) => (
    <tr key={key 1} className="border-t-2 border-b-2 py-4 bg-slate-100 border-slate-200">
         <td className="pl-4 border-r-2 border-slate-200">{key 1}</td>
         <td className="pl-4 border-r-2 border-slate-200">{termin.name}</td>
         <td className="pl-4 border-r-2 border-slate-200">{termin.phone}</td>
         {(termin.time >= 1000) ? (
            <td className="pl-4 border-r-2 border-slate-200">
                {Math.floor(termin.time / 100)}:{termin.time % 100} - {((termin.time % 100 >= 15) ? Math.floor(termin.time / 100)   1 : Math.floor(termin.time / 100))}:{(termin.time % 100   45) % 60}
            </td>
         ) : (
            <td className="pl-4 border-r-2 border-slate-200">
                {Math.floor(termin.time / 100)}:{termin.time % 100} - {((termin.time % 100 >= 15) ? Math.floor(termin.time / 100)   1 : Math.floor(termin.time / 100))}:{(termin.time % 100   45) % 60}
            </td>
         )}
         <td className="pl-2">
            <button 
            onDoubleClick={deleteOne(termin.time, termin.id)}
            className="text-white bg-sky-600 w-10 h-10 flex justify-center px-1 pt-3 rounded-sm mt-2 mb-1 shadow-sm shadow-sky-200"><FaTrash /></button>
        </td>
    </tr>
)))}

And here is my deleteOne function:

 const deleteOne = (time, uid) => {
       
        const ref = doc(db, 'zakazeniTermini', uid)
        const ref2 = doc(db, 'termini', time.toString())
        deleteOne(ref)
        updateDoc(ref2, {
            slobodniKreveti: increment(1)
        })
   
       const newArray = zakazani.filter(termin => termin.id !== uid)
       setZakazani(newArray)
    }

EDIT: I get the error for both parameters in the function.

Thanks in advance for helping :)

CodePudding user response:

This means that you're passing null (or undefined) to the doc call somewhere. Most likely it's your uid variable that is null, but you should check all variables before using then:

const deleteOne = (time, uid) => {      
    if (!uid) throw `deleteOne requires a uid value, but you passed '${uid}'.`
    if (!time || !time.toString) throw `deleteOne requires a time value that implements toString(), but you passed '${time}'.` 

    ...
}
  • Related