Component Design — Series 3

Preview — 3 of 10 questions

Why spread ...rest onto the <button>?

javascript

function Button({ variant = 'primary', children, ...rest }) {
  return (
    <button className={`btn btn-${variant}`} {...rest}>
      {children}
    </button>
  );
}

AIt lets consumers pass through any standard <button> attribute you did not explicitly declare — onClick, disabled, type, aria-label, data-testid, id — without you having to enumerate and forward each one. The component stays small while remaining fully usable as a real button

BIt is required for the component to render

CIt makes the component faster

DIt prevents the button from receiving any props

What is the design smell, and the fix?

javascript

<Alert isSuccess isLarge isDismissible />
<Alert isError isSmall />
<Alert isWarning isLarge isDismissible />

ABooleans are always wrong in React

BMultiple mutually-exclusive booleans (isSuccess/isError/isWarning, isLarge/isSmall) create invalid combinations (isSuccess isError) and grow combinatorially. Replace each exclusive group with one enumerated prop: <Alert status="success" size="lg" dismissible />. Keep booleans only for genuinely independent on/off flags

CYou should pass all of them in a single object prop

DAdd PropTypes and move on

What is MousePosition doing, and how does it render its children?

javascript

<MousePosition>
  {({ x, y }) => <p>Cursor at {x}, {y}</p>}
</MousePosition>

AIt ignores children and renders a default

Bchildren must be JSX, so this throws

Cchildren here is a function. MousePosition tracks the cursor in state and calls this.props.children({ x, y }) (or children({ x, y })) during render, passing the current values. The consumer decides what to render with them. This is the render-props pattern using the children prop as the render function

DIt uses React.cloneElement to inject x and y as props

Answer all 10 questions (7 more), see explanations for every answer, and track your score.