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.
In Card.tsx, there is both a
handleSubmitandisValidprops. The caller can provide contradictory props like{ isValid: false, handleSubmit: () => { send(strangeValue); } }, wherestrangeValuecan be a default causing unexpected outcomes, or a runtime error.My proposal here would be to provide
handleSubmitas an optional prop, and absence implicitly means invalidity.On a practical level, this reduces implementations like this (
parsedValuecomes from the implementation ofNumberInput, where public component parses the value of a text input):to this (pardon the syntax here, could be written nicer with the callback pulled out top level):
This blog post is a much better explanation for all of this.