I have function it works good but I want to improve that
const canPrepareReview = (): boolean => {
if (loading) return true;
if (Object.keys(assets).length !== 0) return true;
return master;
}
<Button
disabled={!canPrepareReview()}
>
I try to use something like this
<Button
disabled={loading || master || Object.keys(assetsSelected).length === 0}
>
but it does not work So any ideas on how it can be improved?
CodePudding user response:
The function evaluates:
loading || Object.keys(assets).length !== 0 || master
But in the first disabled
attribute, the function result is negated, so we evaluate:
!(loading || Object.keys(assets).length !== 0 || master)
If you put that as expression in the disabled
attribute, it should give equivalent behaviour as in the function-based solution.
However, defining the function is actually better practice. Don't bloat attributes with complex expressions.