cf.completefrontend

Predict the outputMedium

What does this product card log when you click Add to cart, then Wishlist?

The section has a capture handler, the card has an onClick, and each button has its own onClick. Wishlist calls e.stopPropagation().

What does it log, and what does the page show?
export default function App() {
  return (
    <section onClickCapture={() => console.log("analytics")}>
      <article onClick={() => console.log("card: open Matcha")}>
        <h2>Matcha</h2>
        <button onClick={() => console.log("button: add to cart")}>
          Add to cart
        </button>
        <button
          onClick={(e) => {
            e.stopPropagation();
            console.log("button: wishlist");
          }}
        >
          Wishlist
        </button>
      </article>
    </section>
  );
}

It runs in development, rendered as <App />, and then:

  1. You click Add to cart.
  2. You click Wishlist.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…