1
{incomes && incomes.length > 0 ?

        <div className='border bg-white shadow-lg p-3 mt-4 mb-4'>

          <SectionHeader label={'Efectivos'} />

          <div id='header' className='grid grid-cols-12 items-center justify-around font-semibold mt-4'>
            <p className='col-span-3 text-center'>Sucursal</p>
            <p className='col-span-2 text-center'>Encargado</p>
            <p className='col-span-3 text-center'>Tipo</p>
            <p className='col-span-1 text-center'>Monto</p>
          </div>

          {incomes.map((income, index) => (

            <div key={income._id} className='grid grid-cols-12 items-center border border-black border-opacity-30 mt-2 shadow-m rounded-lg'>

              <div id='list-element' className=' flex col-span-10 items-center justify-around pt-3 pb-3'>
                <p className='text-center text-xs w-3/12'>{income.branch.branch ? income.branch.branch : income.branch}</p>
                <p className='text-center text-xs w-3/12'>{income.employee.name + ' ' + income.employee.lastName}</p>
                <p className='text-center text-xs w-2/12'>{income.type.name ? income.type.name : income.type}</p>
                <p className='text-center text-xs w-3/12'>{income.amount.toLocaleString("es-MX", { style: 'currency', currency: 'MXN' })}</p>
              </div>

              {currentUser._id == income.employee._id ?

                <div>
                  <button id={income._id} onClick={() => { setIsOpen(isOpen ? false : true) }} disabled={loading} className=' col-span-2 bg-slate-100 border shadow-lg rounded-lg text-center h-10 w-10 m-3'>
                    <span>
                      <FaTrash className='text-red-700 m-auto' />
                    </span>
                  </button>

                  {isOpen ?
                    <div className='fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex justify-center items-center'>
                      <div className='bg-white p-5 rounded-lg flex flex-col justify-center items-center gap-5'>
                        <div>
                          <p className='text-3xl font-semibold'>¿Estás seguro de borrar este registro?</p>
                        </div>
                        <div className='flex gap-10'>
                          <div>
                            <button className='rounded-lg bg-red-500 text-white shadow-lg w-20 h-10' onClick={() => { deleteIncome(income._id, index), setIsOpen(isOpen ? false : true) }}>Si</button>
                          </div>
                          <div>
                            <button className='rounded-lg border shadow-lg w-20 h-10' onClick={() => { setIsOpen(isOpen ? false : true) }}>No</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    : ''}

                </div>

                : ''}

            </div>

          ))}

          <div className='flex mt-4 border-opacity-30 shadow-lg border-black border rounded-lg p-3'>
            <p className='w-6/12 text-center'>Total:</p>
            <p className='w-6/12 text-center'>{incomesTotal.toLocaleString("es-MX", { style: 'currency', currency: 'MXN' })}</p>

          </div>

        </div>
        : ''}

Esta es la función que uso para no tener que volver a consultar la lista después de eliminar un registro. El deleteIncomeFetch funciona bien, el problema está desde que el console.log me muestra los datos del último registro y no de el del botón que estoy clickeando

const deleteIncome = async (incomeId, index) => {

    setLoading(true)

    console.log(index, incomeId)//lastItemIndex, lastItemId

    const { error } = await deleteIncomeFetch(incomeId)

    setLoading(false)

    if (error == null) {

      setIncomesTotal(incomesTotal - parseFloat(incomes[index].amount))
      incomes.splice(index, 1)
    }
  }

Aquí pulsé el botón del elemento que tiene el monto de 1000, pero elimina el último

Todo lo lista bien, pero cuando selecciono cualquier botón elimina el último registro (Supongo que lo toma como si estuviera clickeando siempre al botón que se genera al final). Estuve buscando y cambiando cosas pero simplemente no cambia. Incluso si le hago console log al indice y al id que se pasa a la función deleteIncome me muestran los del último registro y es el que resulta eliminado. Espero encontrar la solución e igual cualquier ayuda o retroalimentación al código se apreciará bastante

1 respuesta 1

1

Creo que miré algunas preguntas similares, pero que no usan la misma tecnología y dejaré la pregunta. La solución es la siguiente: Cuando presiono el botón de eliminar se cambia el estado de isOpen, pero este estado influye en las ventanas modales que se generan para todos los elementos de mi arreglo, entonces todas se abren, pero como es de esperarse la última que se abre es la última que fue renderizada (En este caso la del último elemento). Lo que hay que hacer es darle un identificador único al botón y luego comprobar que la ventana que se abrió fue la que comparte el identificador del botón pulsado.

No sé si estoy en lo correcto, pero creo que describir bien un problema te da un empujón a encontrar la solución.

{incomes && incomes.length > 0 ?

    <div className='border bg-white shadow-lg p-3 mt-4 mb-4'>

      <SectionHeader label={'Efectivos'} />

      <div id='header' className='grid grid-cols-12 items-center justify-around font-semibold mt-4'>
        <p className='col-span-3 text-center'>Sucursal</p>
        <p className='col-span-2 text-center'>Encargado</p>
        <p className='col-span-3 text-center'>Tipo</p>
        <p className='col-span-1 text-center'>Monto</p>
      </div>

      {incomes.map((income, index) => (

        <div key={income._id} className='grid grid-cols-12 items-center border border-black border-opacity-30 mt-2 shadow-m rounded-lg'>

          <div id='list-element' className=' flex col-span-10 items-center justify-around pt-3 pb-3'>
            <p className='text-center text-xs w-3/12'>{income.branch.branch ? income.branch.branch : income.branch}</p>
            <p className='text-center text-xs w-3/12'>{income.employee.name + ' ' + income.employee.lastName}</p>
            <p className='text-center text-xs w-2/12'>{income.type.name ? income.type.name : income.type}</p>
            <p className='text-center text-xs w-3/12'>{income.amount.toLocaleString("es-MX", { style: 'currency', currency: 'MXN' })}</p>
          </div>

          {currentUser._id == income.employee._id ?

            <div>
              <button id={income._id} onClick={() => { setIsOpen(isOpen ? false : true), setButtonId(income._id) }} disabled={loading} className=' col-span-2 bg-slate-100 border shadow-lg rounded-lg text-center h-10 w-10 m-3'>
                <span>
                  <FaTrash className='text-red-700 m-auto' />
                </span>
              </button>

              {isOpen && income._id == buttonId ?
                <div className='fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex justify-center items-center'>
                  <div className='bg-white p-5 rounded-lg flex flex-col justify-center items-center gap-5'>
                    <div>
                      <p className='text-3xl font-semibold'>¿Estás seguro de borrar este registro?</p>
                    </div>
                    <div className='flex gap-10'>
                      <div>
                        <button className='rounded-lg bg-red-500 text-white shadow-lg w-20 h-10' onClick={() => { deleteIncome(income._id, index), setIsOpen(isOpen ? false : true) }}>Si</button>
                      </div>
                      <div>
                        <button className='rounded-lg border shadow-lg w-20 h-10' onClick={() => { setIsOpen(isOpen ? false : true) }}>No</button>
                      </div>
                    </div>
                  </div>
                </div>
                : ''}

            </div>

            : ''}

        </div>

      ))}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.