What is the difference between passing a component as a prop and nesting it as children?

Nesting as children is the natural way of writing JSX where content sits between opening and closing tags, and it reads like regular HTML. Passing a component as a named prop is useful when a component needs more than one separate piece of content in different places, since children alone only gives you a single slot.

// Nested as children, one slot
<Card>
  <p>Main content</p>
</Card>

// Passed as a named prop, extra slot
<Card footer={<Button>Save</Button>}>
  <p>Main content</p>
</Card>