Next.js Discord

Discord Forum

Child button in parent button can not be reached.

Answered
Munchkin posted this in #help-forum
Open in Discord
MunchkinOP
As the title says. I have a 2 button, a parent and a child.
I want it so that when you press the child button something should run.
but now when I click it. It actives the onClick on the parent button which sends the user to a different page.

I would appreciate any help

Code;

  const HandleSendToSheet = (values) => {
    router.push(`./characterpage/?characterInfo=${JSON.stringify(values)}`);
  };

  const HandleAlertBox = () => {
    console.log("BUTTON HIT");
    return <AlertBox />;
  };


 return (
                  <button
                    key={index}
                    className={styles.sheetPreview}
                    onClick={() => {
                      HandleSendToSheet(SheetInfo);
                    }}
                  >
                    {SheetInfo.playerInfo.CharacterName}
                    <button
                      className={styles.deleteButton}
                      onClick={() => {
                        HandleAlertBox;
                      }}
                    >
                      {/* trashcan icon */}
                      <svg
                        class={styles.trashcan}
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="white"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      >
                        {" "}
                        <polyline points="3 6 5 6 21 6" />{" "}
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />{" "}
                        <line x1="10" y1="11" x2="10" y2="17" />{" "}
                        <line x1="14" y1="11" x2="14" y2="17" />
                      </svg>
                    </button>
                  </button>

The hit button console.log() is not fired.
Answered by not-milo.tsx
Nesting buttons inside each other is a no-no thing to do... Consider changing your outer button to another html element like a span and use js to perform actions on click. Keep in mind that you'd have to [stop propagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) of the click event inside your inner button to avoid triggering the event on the outer element as well.
View full answer

3 Replies

not-milo.tsx
Nesting buttons inside each other is a no-no thing to do... Consider changing your outer button to another html element like a span and use js to perform actions on click. Keep in mind that you'd have to [stop propagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) of the click event inside your inner button to avoid triggering the event on the outer element as well.
Answer
MunchkinOP
figured that to be a thing. ill take a look at it. thanks
not-milo.tsx
No problem ✌️