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.
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 fastest fix is to remove the animation:
{state.description.hasErrors && <div className="liveValidateMessage">{state.description.message}</div>}