Next.js Discord

Discord Forum

Button inside Link trigger the href, how disable it ?

Unanswered
Pacific herring posted this in #help-forum
Open in Discord
Pacific herringOP
Well, I have a Link component (from Next) for my card. But I also have a like button inside it. When I click on my button, the Link is triggered, how to prevent this ?

9 Replies

Pacific herringOP
When adding :
e.preventDefault();
e.stopPropagation();

its working, but still have the top loader loading for nothing
American Crow
just a guess since you did not provide any code:
Is that button within a form? If so it might triggers the form submit. Try using button type=button and/or preventDefault within the form submit
@American Crow just a guess since you did not provide any code: Is that button within a form? If so it might triggers the form submit. Try using button type=button and/or preventDefault within the form submit
Pacific herringOP
Sry, there is my code :
<Link
      href={`/film/${review?.movie_id}/review/${review?.id}`}
          // className="flex items-start gap-2 bg-muted rounded-xl p-2"
      className={cn(
        'flex items-start gap-2 bg-muted rounded-xl p-2',
        className
      )}
      >
          <UserCard user={review.user} icon />
      <div className='w-full space-y-2'>
        {/* HEADER */}
        <div className='w-full flex justify-between gap-2'>
          <Link href={`/@${review.user?.username}`} className='line-clamp-1'>
            {review.user?.username}
          </Link>
          <div className="flex justify-center items-center shrink-0">
            <div className='text-sm text-muted-foreground'>
              {formatDistance(new Date(review.created_at), new Date(), {
                addSuffix: true,
                locale: locale === 'fr' ? fr : enUS
              })}
            </div>
            <MovieReviewSettings review={review} />
          </div>
        </div>
        {/* BODY */}
        <div>
          <div className="flex gap-2 items-center">
            <Rating rating={activity?.rating} is_liked={activity?.is_liked} />
            <p className="font-semibold line-clamp-1">{review?.title}</p>
          </div>
          <div className="overflow-hidden text-sm">
            <Overview data={JSON.parse(review?.body ?? '')} />
          </div>
        </div>
        {/* ACTIVITY */}
        <div className='flex justify-between items-center'>
          {/* Comments */}
          <div className='text-sm text-muted-foreground'>
            {review?.comments_count} commentaires
            <span className='mx-1'>•</span>
            Voir l&apos;activité
          </div>
          {/* Actions */}
          <div>
            <UserMovieReviewLike reviewId={review?.id} />
          </div>
        </div>
      </div>
      </Link>
And for exemple the Like Button is like this :
    <Tooltip>
            <TooltipTrigger asChild>
            <Button
                onClick={async (e) => {
                    // e.preventDefault();
                    // e.stopPropagation();
                    isLiked ? await unlikeMutation() : await insertWatchlistMutation()
                }}
                disabled={isLoading || isError}
                size="icon"
                variant={'action'}
                className={`rounded-full`}
            >
                {(isLoading || isLiked === undefined)  ? (
                <Icons.spinner className="animate-spin" />
                ) : isError ? (
                <AlertCircleIcon />
                ) : (
                <HeartIcon className={`${isLiked && 'fill-foreground'}`} />
                )}
            </Button>
            </TooltipTrigger>
            <TooltipContent side="bottom">
            {!isLiked ? (
                <p>Aimer</p>
            ) : (
                <p>Ne plus aimer</p>
            )}
            </TooltipContent>
        </Tooltip>
There is no form, just a simple button inside the Link component
Original message was deleted
Pacific herringOP
How did u do the syntax highlightening ? :blob_wave:
American Crow
you write the language behind the three quotes:
``tsx
Pacific herringOP
ohh amazing, Ive updated my post
American Crow
okay i deleted mine