props.children là gì và cách sử dụng như thế nào?

props.children là một prop đặc biệt chứa toàn bộ nội dung được nhúng giữa thẻ mở và thẻ đóng của một component.

Ví dụ sử dụng:

// Ở Component cha:
<Modal>
  <h2>Tiêu đề</h2>
  <p>Nội dung mô tả.</p>
</Modal>

// Ở Component Modal:
function Modal({ children }) {
  return (
    <div className="modal-wrapper">
      <div className="modal-content">
        {children} {/* <h2> và <p> sẽ được render tại đây */}
      </div>
    </div>
  );
}

Lợi ích:
Mẫu thiết kế này (Composition) dùng để tạo ra các "Wrapper Component" linh hoạt như Layout, Modal, Card, Button... mà component đó không cần biết trước cấu trúc dữ liệu con của nó là gì.