Proposal: Card `isValid` and `handleSubmit` props conflict

[peterszerzo]

In Card.tsx, there is both a handleSubmit and isValid props. The caller can provide contradictory props like { isValid: false, handleSubmit: () => { send(strangeValue); } }, where strangeValue can be a default causing unexpected outcomes, or a runtime error.

My proposal here would be to provide handleSubmit as an optional prop, and absence implicitly means invalidity.

On a practical level, this reduces implementations like this (parsedValue comes from the implementation of NumberInput, where public component parses the value of a text input):

<Card
  handleSubmit={() => {
    if (parsedValue !== null) {
      props.handleSubmit(parsedValue);
    }
  }}
  isValid={parsedValue !== null}
/>

to this (pardon the syntax here, could be written nicer with the callback pulled out top level):

<Card
  handleSubmit={parsedValue && (() => {
    if (parsedValue !== null) {
      props.handleSubmit(parsedValue);
    }
  })}
/>

This blog post is a much better explanation for all of this.

[johnrees]

Thanks Peter, this is sound advice. Honestly the Card stuff is very likely to change again in the next few days to accommodate Pages, it was just a quick refactoring that needed to be done as part of the process. That being said I'll take another proper look at this issue and the article you've shared with fresh eyes tomorrow 🙏