Composition, Fragments and Styling

Example

Components can wrap other content through the special children prop.

function Card({ title, children }) {
  return (
    <div style={{ border: '1px solid #ccc', borderRadius: 8, padding: 10, marginBottom: 8 }}>
      <h3>{title}</h3>
      {children}
    </div>
  );
}

export default function App() {
  return (
    <>
      <Card title="Profile"><p>Asha, Frontend developer</p></Card>
      <Card title="Skills"><p>React, TypeScript</p></Card>
    </>
  );
}

Result