Next.js Discord

Discord Forum

how do I make the posts clickable and then it would link to a detailed view

Unanswered
Chum salmon posted this in #help-forum
Open in Discord
Chum salmonOP
https://breaksphere.vercel.app/

37 Replies

Sun bear
You need to wrap the Post in a Link with beef pointing to the post slug, I’d ir whatever, and make a Dynamic Route for the Post Details that use the param for fetch the data
return (
          <li className="flex gap-4 border-b dark:border-neutral-700 px-4 py-4">
          <ConfirmModal
            isOpen={isDeleteModalOpen}
            content="Are you sure you want to delete this post?"
            onCancel={closeDeleteModal}
            onConfirm={handleDeletePost}
          />
          <Link href={`/profiles/${user.id}`}>
              <ProfileImage src={user.image} />
          </Link>
            <div className="flex min-w-0 flex-grow flex-col">
              <div className="flex min-w-0 break-words gap-1">
                  <Link
                    href={`/profiles/${user.id}`}
                    className="font-bold min-w-0 break-words hover:underline focus-visible:underline dark:text-white"
                  >
                      <p className="truncate">{user.name}</p>
                  </Link>
                  <span className="text-neutral-500">{dateTimeFormatter.format(createdAt)}</span>
              </div>
              <p className="min-w-0 break-words py-1 dark:text-white">{content}</p>
              <div className="flex">
                  <HeartButton onClick={handleToggleLike} isLoading={toggleLike.isLoading} likedByMe={likedByMe} likeCount={likeCount} id={id} />
                  <DeleteButton onClick={openDeleteModal} postOwnerId={user.id} />
                  {/*<ShareButton postId={id}/> TODO: Reenable*/}
              </div>
          </div>
        </li>
    );
without the other buttons on it being unclickable because it just takes you to the post
if I try to hit like for example instead im taken to the post
Sun bear
Make another button (see details)
But not a button, a Link
Chum salmonOP
is there no way to do it that if I click anywhere but one of other buttons then it redirects me?
Sun bear
O think there is a way to prevent events to pass to the parent component
DirtyCajunRice | AppDir
you are layering backwards
Chum salmonOP
what does that mean?
sorry this is my first project
DirtyCajunRice | AppDir
just increase the zindex of the inner clickable items by 1
so they are on top of your catchall layer
Chum salmonOP
so wrap the whole thing in alink and then put the class z-1 on every button?
Sun bear
Sorry am beginner too, just trying help others 😅
@Sun bear That works too
DirtyCajunRice | AppDir
preventDefault does have its usecases, this is just a bad reason to use it
think of it like a blanket and pillows
Chum salmonOP
thank u bro I been stuck on this forever 😭
DirtyCajunRice | AppDir
if the pillows are under the blanket you will only ever touch the blanket
gotta get the pillows on top
or kick the wife out of bed
😂
@DirtyCajunRice | AppDir or kick the wife out of bed
Chum salmonOP
what did the wife do 😭
@Chum salmon what did the wife do 😭
DirtyCajunRice | AppDir
tried to preventDefault
😏
@DirtyCajunRice | AppDir tried to preventDefault
Chum salmonOP
return (
        <li className="flex gap-4 border-b dark:border-neutral-700 px-4 py-4">
            <ConfirmModal
                isOpen={isDeleteModalOpen}
                content="Are you sure you want to delete this post?"
                onCancel={closeDeleteModal}
                onConfirm={handleDeletePost}
            />
            <Link href={`/posts/${id}`}>
                <Link href={`/profiles/${user.id}`} className="z-1">
                  <ProfileImage src={user.image} />
                </Link>
                <div className="flex min-w-0 flex-grow flex-col">
                      <div className="flex min-w-0 break-words gap-1">
                          <Link
                            href={`/profiles/${user.id}`}
                            className="font-bold min-w-0 break-words z-1 hover:underline focus-visible:underline dark:text-white"
                          >
                              <p className="truncate">{user.name}</p>
                          </Link>
                          <span className="text-neutral-500">{dateTimeFormatter.format(createdAt)}</span>
                      </div>
                  <p className="min-w-0 break-words py-1 dark:text-white">{content}</p>
                  <div className="flex z-1">
                      <HeartButton onClick={handleToggleLike} isLoading={toggleLike.isLoading} likedByMe={likedByMe} likeCount={likeCount} id={id} />
                      <DeleteButton onClick={openDeleteModal} postOwnerId={user.id} />
                      {/*<ShareButton postId={id}/> TODO: Reenable*/}
                  </div>
                </div>
            </Link>
        </li>
    );
.

when I do this it ruins my styling and clicking on the buttons works but redirects me still
@DirtyCajunRice | AppDir tried to preventDefault
Sun bear
That’s funny 😆
@Chum salmon . when I do this it ruins my styling and clicking on the buttons works but redirects me still
DirtyCajunRice | AppDir
you could make the outer div relative, and make the link absolute full width full height. that would remove it from your styling completely and make sure its behind