example.jsx

// prefer this
const ExamplePage = () => {
  return (
    <>
      <div>
        <h1>Card 1!</h1>
        <h2>A simple card!</h2>
      </div>

      <div>
        <h1>Card 2!</h1>
        <h2>Some subtitle!</h2>
      </div>

      <div>
        <h1>Card 3!</h1>
        <span>This has an extra line!</span>
      </div>
    </>
  );
}

// over this
const SimpleCard = ({ title, subtitle, extra }) => {
  return (
    <div>
      {title && <h1>{title}</h1>}
      {subtitle && <h2>{subtitle}</h2>}
      {extra && <span>{extra}</span>}
    </div>
  );
};

const ExamplePage = () => {
  return (
    <>
      <SimpleCard
        title='Card 1!'
        subtitle='A simple card!'
      />
      <SimpleCard
        title='Card 2!'
        subtitle='Some subtitle!'
      />
      <SimpleCard
        title='Card 3!'
        extra='This has an extra line!'
      />
    </>
  );
}