Rendering a list of shows

The answer to the exercise in Rendering a list of shows.

The callback used curly brackets, so its body ran and gave back nothing. Round brackets after the arrow return the element instead.
Each card also needs a key, and show.id is the one value that belongs to the show and never changes.

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

const shows = [
  { id: "s1", title: "The Bear", year: 2022, genre: "Drama", rating: 8.6, still: "still-warm" },
  { id: "s2", title: "Severance", year: 2022, genre: "Thriller", rating: 8.7, still: "still-cold" },
  { id: "s3", title: "Andor", year: 2022, genre: "Sci-Fi", rating: 8.4, still: "still-dusty" },
];

export default function App() {
  return (
    <div className="page">
      {/* was: (show) => { <ShowCard show={show} />; } with no return and no key */}
      {shows.map((show) => (
        <ShowCard key={show.id} show={show} />
      ))}
    </div>
  );
}