Handling clicks

The answer to the exercise in Handling clicks.

playShow("The Bear") ran while React was drawing each card, and its return value, undefined, became the handler. An arrow is a function React can call later, and it passes the card's own title.
markWatched had no arrow, so React called it with the click event instead of a title. It needs an arrow too.

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>
  );
}