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ì.

props.children is a special prop containing whatever content is nested between a component's opening and closing tags.

Usage Example:

// In the Parent Component:
<Modal>
  <h2>Title</h2>
  <p>Description text.</p>
</Modal>

// In the Modal Component:
function Modal({ children }) {
  return (
    <div className="modal-wrapper">
      <div className="modal-content">
        {children} {/* The <h2> and <p> are rendered here */}
      </div>
    </div>
  );
}

Benefits:
This design pattern (Composition) is highly useful for creating flexible "Wrapper Components" like Layouts, Modals, Cards, or specialized Buttons... where the wrapper component doesn't need to know the exact structure of its children in advance.