Component Children

In JSX, the content between the opening and closing tags is passed to the component as a special prop, children. The children property will accept strings, HTML, JSX, or JavaScript expressions.

function Title (props) {
  return <h2>{props.children}</h2>
}

function Price (props) {
  return <p>$ {props.children}</p>
}

function Product (props) {
  return <div className="product">{props.children}</div>
}

function App () {
  return (
    <Product>
      <Title>USB Mouse</Title>
      <Price>14.99</Price>
    </Product>
  )
}