React - Modal inside map function receives wrong ._id

Question

I've a map that creates edit and delete buttons. The delete button needs to be confirmed. So I created a modal.

console.log(additive._id) at the first delete button gives me the correct ._id the confirm button inside the modal gives me always the last ._id of the array i map through, so it'll always delete the last item.

How can i get the correct ._id?

{additives.sort(byId).map((additive) => (
  <div key={additive._id}>
              <div>
                <div </div>
                <div>{additive.additive[0]?.label}</div>
              </div>

              <div className='flex justify-between items-center'>
                <button
                  onClick={() =>
                    editAdditive(
                      additive._id,
                      additive.additive[0]?.value,
                      additive.additive[0]?.label
                    )
                  }>
                  Edit
                </button>
                <button
                  onClick={() => {
                    setShowModal(!showModal);
                    console.log(additive._id);
                  }}
                 
                >
                  Delete
                </button>
                {showModal && (
                  <>
                    <div
                      className='backdrop'
                      onClick={(e) => {
                        if (e.target.className === 'backdrop') {
                          setShowModal(false);
                        }
                      }}
                    >
                      <div className='relative w-auto my-6 mx-auto max-w-3xl'>
                        <div className=' rounded-lg shadow-2xl relative flex flex-col w-full bg-white outline-none focus:outline-none'>
                          <div className='flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t bg-gray-600'>
                            <h3 className='text-3xl font-semibold text-red-500'>
                              Delete Additive
                            </h3>
                          </div>
                          <div className='relative p-6 flex-auto bg-gray-600'>
                            <p className='my-4 text-white text-lg leading-relaxed'>
                              Are you sure?
                            </p>
                          </div>
                          <div className='flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b bg-gray-600'>
                            <button
                              className='text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => setShowModal(!showModal)}
                            >
                              Cancel
                            </button>
                            <button
                              className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
                              type='button'
                              onClick={() => {
                                deleteAdditive(additive._id);
                                setShowModal(!showModal);
                                console.log(additive._id);
                              }}
                            >
                              Confirm
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </>
                )}
              </div>
            </div>
))}

Answer 1

store the additive id in a state and use it in the modal

 const [additiveId, setAdditiveId] = useState()

  <button
     onClick={() => {
        setShowModal(!showModal);
        setAdditiveId(additive._id)
        console.log(additive._id);
    }}     
  >
        Delete
  </button>

  <button
      className='bg-red-500 text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150'
      type='button'
      onClick={() => {
         deleteAdditive(additiveId);
         setShowModal(!showModal);
         console.log(additiveId);
       }}
     >
        Confirm
     </button>