← Back to the exercise

Passing props to a card

The answer to the exercise in Passing props to a card.

  • Severance was passed name, but ShowCard reads title. A prop the component never asks for is simply not read, so the heading was empty.
  • Andor's year was "2022", a piece of text. It looks right on screen and is the wrong type, so year={2022} is the fix.
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" />
      {/* was: name="Severance" */}
      <ShowCard title="Severance" year={2022} genre="Thriller" rating={8.7} still="still-cold" />
      {/* was: year="2022" */}
      <ShowCard title="Andor" year={2022} genre="Sci-Fi" rating={8.4} still="still-dusty" />
    </div>
  );
}