Real World Example

YouTube's home page is one VideoCard component repeated for every video, inside a VideoGrid, next to a Sidebar. Change the card once and every video updates.

function VideoCard({ video }) {
  return (
    <div className="card">
      <img src={video.thumbnail} alt="" />
      <h4>{video.title}</h4>
      <p>{video.channel} · {video.views} views</p>
    </div>
  );
}

function VideoGrid({ videos }) {
  return <div className="grid">{videos.map((v) => <VideoCard key={v.id} video={v} />)}</div>;
}