React stale error date on child components
I fixed the issue!
What I did
Instead of persisting errors
in the global state
, and instead of passing validate
, to set the global state, to the methods, I maintain it as function defined outside the main component's class, like this :
/**
* Validates a PayRate
* @param { PayRate } value
* @returns { Object } any errors
**/
function validate(value = {}) {
// extract rate,date from value
const rate = value.Rate,
date = value.EffectiveDate
let errors = {}
// rate better resolve to something
if (!rate) {
errors.rate = "Enter a valid pay rate amount"
}
// date better be valid
if ((!date) || (!date.toLocaleDateString)) {
errors.date = "Enter a date"
}
else if (date.toLocaleDateString("en-US") === "Invalid Date") {
errors.date = "Enter a valid pay rate date"
}
return errors
}
Note the much simpler implementation. I then no longer need to call validate
on the updateCurrentPayRate...
methods.
Instead, I invoke it on NewPayRateRow.render
(which I can now do because it's not touching state at all, avoiding any invariant violation), save the result to a local const variable, called errors
, and use that instead of this.props.errors
. Though, truth be told, I could probably put validate
back in this.props
to achieve a layer of abstraction/extensibility.
Also, I took Pagoaga's advice and used className
instead of class
(I don't have that as muscle memory yet).
You have a "class" attribute inside several of your render functions, replacing it with "className" will allow the error to show up : https://codepen.io/BPagoaga/pen/QoMXmw
return <div className="col-md-2">