Animating an unmounted component inside a react transition

Question

This <ErrorBanner/> component is always rendered, but uses !!error for the Transition's "in" property. So it animates in when there's an error, and animates out when the error is gone.

However, the error message inside of it also only renders when there's an error. This means the error message unmounts before the banner animates out, so the exiting banner is blank.

Everything that's happening makes complete sense to me. But I'd like to know if there's any way I can show the error as the banner is animating out?

const Wrapper = styled.div({
  position: 'absolute',
  left: '72px',
  right: '460px',
  fontSize: TextSizes.Medium,
  padding: '24px 36px',
  borderRadius: '0 0 12px 12px',
  background: colors.componentBackgroundGrey,
  transition: '1s ease',
});

const transitionStyles = {
  entering: { top: -100 },
  entered: { top: 0 },
  exiting: { top: 0 },
  exited: { top: -100 },
};

const ErrorBanner = ({ error, code }: Props) => (
  <Transition in={ !!error } timeout={ 0 }>{ state =>
    <Wrapper style={ transitionStyles[state] }>
      { // the message disappears (because it's null) before its container animates out.
        error && `ERROR: (${ code }) ${ error.message }`
      }
    </Wrapper>
  }</Transition>
);

Why you only showing the error when error is true if that's the value for the in prop? If you want the error to unmount just set unmountonexit={true} in your Transition component — Moshe Sommers, May 21 '20 at 16:52
Well if I always show the error, then my program crashes when error is null. I just tried setting `unmountOnExit=true` and having the message be `ERROR: ${ error!.message } (${ code })`, and it didn't crash on startup, but it did crash when the error was set to null because it was still trying to display the null error. — Jonathan Tuzman, May 21 '20 at 17:03

Moshe Sommers · Answer 1 · 2020-05-21T17:49:41.923

Ok so the issue is as soon as the error is null you no longer have access to the message. What you need to do is save it in state and only update it once it's finished exiting.

const ErrorBanner = (props: Props) => { 
const [errorState, seterrorState] = useState(props);
return (
   <Transition 
       in={ !!errorState.error } 
       timeout={ 0 }
       onExitEd={() => seterrorState(props)}
     >{ state =>
       <Wrapper style={ transitionStyles[state] }>
       { // the message disappears (because it's null) before its container animates out.
            error && `ERROR: (${ errorState.code }) ${ errorState.error.message }`
       }
      </Wrapper>
  }</Transition>

) };

Animating an unmounted component inside a react transition

1 Answers1