CODEWITHSUNDEEP
htmlreactjsnext.js
Stikoun
Stikoun

Reputation: 105

NextJS button inside Link component

I wonder how is possible to have button inside NextJS Link component? When you wrap the button by and click the button, then it run onClick event and after it redirect to value in href attribute.

How can you just run onClick button event and stop redirecting?

<Link href={`./${school.attributes.Slug}/obor/${field.attributes.Code}`}>
  <div className="responsive-table__row">
    <div className="responsive-table__item">50</div>
    <div className="responsive-table__item">40/50</div>
    <div className="responsive-table__item">Test</div>
    <div className="responsive-table__item">
      <button className="responsive-table__button button button--secondary" onClick={() => handleModalOpenerClick(field)}>Show modal</button>
    </div>
  </div>
</Link>

Upvotes: 6

Views: 15985

Answers (1)

Boky
Boky

Reputation: 12084

Change your onClick handler to this:

onClick={(e) => {
   e.preventDefault();
   e.stopPropagation();
   handleModalOpenerClick(field);
}}

and it should work.

Upvotes: 11

Related Questions