Propagation and defaults

The answer to the exercise in Propagation and defaults.

Play sits inside the card, so the click travelled up and logged card: as well. event.stopPropagation() stops that journey.
return false does nothing in React. event.preventDefault() stops the browser following the link, so the cards stay. The click still bubbles, which is why card: The Bear appears after open: The Bear.

import "./styles.css";
import ShowCard from "./ShowCard";

export default function App() {
  return (
    <div className="page">
      <ShowCard
        title="The Bear"
        year={2022}
        genre="Drama"
        rating={8.6}
        still="still-warm"
      />
      <ShowCard
        title="Severance"
        year={2022}
        genre="Thriller"
        rating={8.7}
        still="still-cold"
      />
      <ShowCard
        title="Andor"
        year={2022}
        genre="Sci-Fi"
        rating={8.4}
        still="still-dusty"
      />
    </div>
  );
}