propsAreLimits.jsx

// This component has the prop `children`
// In a universe of infinite possibilities,
// the only limit is that `children` is inside
// the `div`. There are no other limits.
function Wrap({ children }) {
  return <div>{children}</div>
}

const BOX_SIZES = {
  small: 100,
  large: 250,
}

function getBoxWidth(size) {
  const width = BOX_SIZES[size]
  return width !== undefined ? width : BOX_SIZES.small
}

// This component has the prop `size`
// It is _very_ limiting. In a universe of infinite
// possibilities, there are only 2 options. Everything else
// is off limits.
function Box({ size = 'small' }) {
  return <div style={{ width: getBoxWidth(size) }}>I am a box</div>
}