How to make a button inside of the anchor tag clickable in React?

Question

I know that some relevant questions exist but none of them really has an answer more than saying that it is not possible. What I would like to achieve is having a dropdown button inside of an anchor tag so that user can be redirected on click but also has a possibility to interact with the button itself since it is a multiple-choice dropdown. Right now, once the user clicks on the button, the anchor tag redirects the user without having any effect on the button.

Just to give you an idea of what the code looks like, here is the minimal reproduction:

  <a href="some_location">
          <span>Some text</span>

          <div>
            <button>My Dropdown button</button>
          </div>
        </a>

HTML explicitly forbids nesting such interactive elements into each other. — CBroe, Feb 01 '21 at 09:52
What could be the solution to achieve the desired result then? — em_code, Feb 01 '21 at 09:58

mahdi ashori · Accepted Answer · 2021-02-01T15:26:53.513

7

i think it's can help you

const myComp = () => {

handelBtn = (e) => {
    e.stopPropagation();
    // OR
    e.preventDefault();
}
return (
    <a href="some_location">
        <span>Some text</span>

        <div>
            <button onClick={handelBtn}>My Dropdown button</button>
        </div>
    </a>
)
}

edited Feb 01 '21 at 15:26

answered Feb 01 '21 at 09:49

mahdi ashori

515
4
13

Tested it with a react router dom and it works. You have to use both: stopPropagation and preventDefault. – Mark Hkr May 27 '21 at 04:33
so what if he want to create href to the page outside of the application then he can't use Link true ? – mahdi ashori Feb 03 '22 at 21:14

score 0 · Answer 2 · answered May 04 '22 at 20:08

I think this can help you.

It works with both <Link> Component and <a> tag. Here <a> tag will be wrapped around the div(card) and div will work as <a> tag when clicked. The button will be above the <a> tag and it is clickable.

const myComp = () => {

return (
    <div class="card">
      <a href="some_location"> </a>
      <span>Some text</span>

      <div>
        <button>My Dropdown button</button>
      </div>
    </div>
)

.card {
    position: relative;
 }
 .card > a {
   position: absolute;
   inset: 0;
 }
 .card  button {
   position: relative;
 }

How to make a button inside of the anchor tag clickable in React?

2 Answers2

Linked