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">