Showing only the good ones

The answer to the exercise in Showing only the good ones.

{rating && ...} gives back the rating when it is truthy, and every rating here is, so every card got the badge. rating >= 8.5 is either true or false.
{episodesLeft && ...} gives back 0 for Andor, and React draws a 0. episodesLeft > 0 is false, and React draws nothing for false.

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

const shows = [
  { id: "s1", title: "The Bear", year: 2022, genre: "Drama", rating: 8.6, episodesLeft: 4, still: "still-warm" },
  { id: "s2", title: "Severance", year: 2022, genre: "Thriller", rating: 8.7, episodesLeft: 2, still: "still-cold" },
  { id: "s3", title: "Andor", year: 2022, genre: "Sci-Fi", rating: 8.4, episodesLeft: 0, still: "still-dusty" },
  { id: "s4", title: "Emily in Paris", year: 2020, genre: "Comedy", rating: 6.9, episodesLeft: 9, still: "still-candy" },
];

export default function App() {
  const worthWatching = shows.filter((show) => show.rating >= 8);

  return (
    <div className="page">
      <p className="lede">
        {worthWatching.length > 0
          ? worthWatching.length + " of " + shows.length + " shows are worth watching."
          : "Nothing worth watching yet."}
      </p>
      <div className="row">
        {worthWatching.map((show) => (
          <ShowCard key={show.id} show={show} />
        ))}
      </div>
    </div>
  );
}

Four shows in the array, three cards on the page. The Bear and Severance carry the badge, Andor does not, and Andor has no episodes line because its count is 0.