← Back to the exercise

Your first component

The answer to the exercise in Your first component.

showcard starts with a small letter, so React read <showcard /> as an HTML tag. There is no such tag, so the browser drew nothing. Renaming the function ShowCard and using it as <ShowCard /> makes React call your component again.

import "./styles.css";

function ShowCard() { // was: function showcard()
  return (
    <article className="card">
      <div className="still still-warm">
        <span className="pill">Drama</span>
      </div>
      <div className="body">
        <h2 className="title">The Bear</h2>
        <p className="meta">
          2022 · ★ 8.6
        </p>
      </div>
    </article>
  );
}

export default function App() {
  return (
    <div className="page">
      {/* was: <showcard /> */}
      <ShowCard />
    </div>
  );
}