Props and composition

Props are the arguments you pass to a component. React components are composed by calling them like any other function and passing data in as attributes. A parent component passes data down to children. Children never reach up.

BookList.tsx

tsx

import { BookCard } from './BookCard';

interface Book {
  id: number;
  title: string;
  author: string;
  price: number;
  stock: number;
}

export function BookList({ books }: { books: Book[] }) {
  return (
    <div className="book-list">
      {books.map((book) => (
        <BookCard key={book.id} book={book} />
      ))}
    </div>
  );
}

A list component composes book card components.

The key prop on the BookCard is not decoration. React uses it to track which item is which across re-renders. Without keys, React falls back to index matching and you get bugs when items are added, removed, or reordered. Always use a stable unique id as the key, never the array index.

Quiz: Quiz

Loading practice…