Splitting into files

The answer to the exercise in Splitting into files.

/pill.js hands its class name out with export default, so the name never gets a name of its own. A namespace import only carries the named exports, which is why styles.pill was undefined, and React draws an element with no class at all. A default import takes the default, so pill is the class name again.

import "./styles.css";
import ShowCard from "./ShowCard";
import { shows } from "./shows";

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

The pills are back on the artwork, and the page is the four-file app again.