Как отрисовать компонент CircleTopik только в среднем компоненте Card?

Question

[shobanof]

function Card() {
  return (
    <div className={s.mainBlock}>
      <CircleTopik />
    </div>
  )
}

function App() {
  return (
    <div className={s.app}>
      <Card />
      <Card />
      <Card />
    </div>
  )
}

Answer 1

[0xD34F]

function Card(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card>
        <CircleTopik />
      </Card>
      <Card />
    </div>
  );
}

или

function Card({ showCircle }) {
  return (
    <div>
      {showCircle ? <CircleTopik /> : null}
    </div>
  );
}

function App() {
  return (
    <div>
      <Card />
      <Card showCircle />
      <Card />
    </div>
  );
}