Forwarding props

A wrapper component usually handles a few props itself and passes the rest to the element it wraps. omit creates a props object without the keys you name, and spreading it forwards everything else:

function Button(props) {
  const others = omit(props, "variant", "children");
  return (
    <button {...others} class={["btn", props.variant]}>
      {props.children}
    </button>
  );
}

The forwarded props stay live, like props itself: when the parent's disabled changes, the button follows. Avoid copying props into a new object yourself, since that reads each one once.

Try it: the buttons look right but do nothing, because Button only uses variant and children. Forward the remaining props with omit and a spread. Save should count up, and Reset should be disabled at zero.