My componentI wont to be able to click the button without being redirected by the link {postState.is_liked ? ( { await updatePostLike(!postState.is_liked); }} size="25px" /> ) : ( { await updatePostLike(!postState.is_liked); }} size="25px" /> )} "{postState.title}"

Prevent Link click when button inside is being clicked

Unanswered

DieZitrone posted this in #help-forum

2024-05-10T20:05:46.135Z

My component
I wont to be able to click the button without being redirected by the link

<Link
      href={`/dashboard/ideas/${post.id}`}
      key={post.id}
      className="h-[35rem] w-[19rem] bg-gray-300 rounded-xl flex flex-col  px-2 pb-2 group/card hover:-translate-y-2 transition-all cursor cursor-pointer text-white "
    >
      <div className="p-1.5 group-hover/card:-translate-y-1 transition-all flex flex-row justify-center">
        <div className="h-4 w-4 bg-gray-900 rounded-full z-20"></div>
      </div>
      <div className="bg-gradient-to-tr from-[#170E13] to-[#7A7ADB] h-full w-full rounded-xl  flex flex-col justify-between relative group-hover/card:-translate-y-2 transition-all">
        <div className="absolute bottom-12 right-4">
          <div className="flex flex-col items-center gap-2 z-10">
            {postState.is_liked ? (
              <button>
                <FaHeart
                  onClick={async (e) => {
                    await updatePostLike(!postState.is_liked);
                  }}
                  size="25px"
                />
              </button>
            ) : (
              <button>
                <BiHeart
                  onClick={async (e) => {
                    await updatePostLike(!postState.is_liked);
                  }}
                  size="25px"
                />
              </button>
            )}

            <BiDotsVerticalRounded size="25px" />
          </div>
        </div>
        <div></div>
        <div className="flex flex-row justify-center p-2 text-center">
          <h3>&quot;{postState.title}&quot;</h3>
        </div>
        
        </div>
      </div>
    </Link>

14 Replies

Sun bear

2024-05-10T20:40:41.622Z

can you send a picture of the card?

DieZitroneOP

2024-05-10T21:13:11.083Z

the heart is the clickable button

@DieZitrone My component I wont to be able to click the button without being redirected by the link tsx <Link href={`/dashboard/ideas/${post.id}`} key={post.id} className="h-[35rem] w-[19rem] bg-gray-300 rounded-xl flex flex-col px-2 pb-2 group/card hover:-translate-y-2 transition-all cursor cursor-pointer text-white " > <div className="p-1.5 group-hover/card:-translate-y-1 transition-all flex flex-row justify-center"> <div className="h-4 w-4 bg-gray-900 rounded-full z-20"></div> </div> <div className="bg-gradient-to-tr from-[#170E13] to-[#7A7ADB] h-full w-full rounded-xl flex flex-col justify-between relative group-hover/card:-translate-y-2 transition-all"> <div className="absolute bottom-12 right-4"> <div className="flex flex-col items-center gap-2 z-10"> {postState.is_liked ? ( <button> <FaHeart onClick={async (e) => { await updatePostLike(!postState.is_liked); }} size="25px" /> </button> ) : ( <button> <BiHeart onClick={async (e) => { await updatePostLike(!postState.is_liked); }} size="25px" /> </button> )} <BiDotsVerticalRounded size="25px" /> </div> </div> <div></div> <div className="flex flex-row justify-center p-2 text-center"> <h3>"{postState.title}"</h3> </div> </div> </div> </Link>

Turkish Van

2024-05-11T00:34:08.416Z

Why is Your button You want to click wrapped by the Link component if You don't want to be redirected anywhere?

Jboncz

2024-05-11T01:38:59.760Z

If you click anywhere else on the card he wanted them to be redirected.

Berlim

2024-05-11T01:42:18.679Z

Can this be achieved by changing the z-index of the heart button?

@Berlim Can this be achieved by changing the z-index of the heart button?

Jboncz

2024-05-11T01:45:37.832Z

Good idea for him to try. Ive never tried to do something like this so Im also curious

DieZitroneOP

2024-05-11T11:22:21.165Z

Tried the z index, no change

joulev

2024-05-11T15:48:05.344Z

:<button onClick={e => {
  e.stopPropagation();
  // do stuff
}>Hello</button>

DieZitroneOP

2024-05-11T17:13:26.914Z

I also tried that xD

Munchkin

2024-05-11T17:58:58.487Z

yeah i think that Link messes that up.

You could try to remove link and make it a button as well and when you click on it you redirect using href.

Jboncz

2024-05-12T00:35:58.226Z

Button can’t be a child of a button.

Well <a> can’t be a child of <a>

Australian Freshwater Crocodile

2024-05-12T00:48:31.566Z

Why not have a div that will have the video and the link, then an other div on top of it (absolute position) where you have your layout. then wrap them both with a div with a relative position.