Transactions Details Page activated when clicking on the options menu on the transaction card.

[predrag-babic]

Hi,
we are working on money menager app and have one issue that we can´t solve.

We want to make dynamic route to the transactions details page, when we click on the transaction card.

The problem is when we click on options menu on the transaction card, routing is beeing activated and we are beeing redirectet to the transactions details page.

We´ve tried with stopPropagation(), but it doesn´t work.

Here is the link to the PR: PR-Transactions Details Page

Do you have any suggestions for us?

Thanks in advance.

[onemanwenttomow]

I think the issue is that your whole card is wrapped in an a tag. I would consider switching to a div (or potentially a more semantic element if it applies) and then using the useRouter hook in combination with push.

Something like this

<div
  onClick={() =>
    router.push(`/transactions/${transaction.id}`)
  }
>
  <TransactionItem
    onHandleDeleteTransaction={handleDeleteTransaction}
    onHandleEditTransaction={handleEditTransaction}
    transaction={transaction}
    handleOpenEditMode={handleOpenEditMode}
    openModal={openModal}
  />
</div>