Compose wrappers with children

Nested JSX arrives in the special children prop.

function Panel({ title, children }) {
  return (
    <section className="panel">
      <h2>{title}</h2>
      {children}
    </section>
  )
}

The parent supplies the content:

<Panel title="Account">
  <p>Signed in as ada@example.com</p>
  <button>Sign out</button>
</Panel>

Panel controls the shared structure. It does not need a separate prop for every paragraph or button that might appear inside it.

This is composition. It is often clearer than adding configuration props such as showButton, buttonText, and bodyType for every variation.

Children are still values from the parent render. The wrapper can place them, hide them, or surround them with markup, but it should not assume a specific child structure unless that is part of a documented component contract.

Use semantic wrappers. A panel that represents an independent topic may be a section; a purely visual wrapper may be a div.

Create a second Panel containing a form. Notice that the wrapper stays reusable without knowing form details.