Using RTG to show client-side validation errors with a fade in/out animation is now throwing a console warning:

“Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.”

Here is the immediate thread on potential solutions.

The Way I have Been Doing It

Credit Brad Schiff

<CSSTransition in={state.description.hasErrors} timeout={330} classNames="liveValidateMessage" unmountOnExit>
  <div className="liveValidateMessage">{state.description.message}</div>
</CSSTransition>

And the CSS:

.liveValidateMessage {
  font-size: .75rem;
  top: .1rem;
  position: absolute;
  z-index: 1;
  padding-top: 7px;
  padding-bottom: 20px;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  background: #ffd7d4;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: crimson;
}

.liveValidateMessage--visible {
  opacity: 1;
  transform: translateY(0);
}

.liveValidateMessage-enter {
  opacity: 0;
  transform: translateY(100%);
}

.liveValidateMessage-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: 0.33s opacity ease-in-out, 0.33s transform ease-in-out;
}

.liveValidateMessage-exit {
  opacity: 1;
  transform: translateY(0);
}

.liveValidateMessage-exit-active {
  opacity: 0;
  transform: translateY(100%);
  transition: 0.33s opacity ease-in-out, 0.33s transform ease-in-out;
}

The Fix

The fastest fix is to remove the animation:

{state.description.hasErrors && <div className="liveValidateMessage">{state.description.message}</div>}