How To Display And Animate React Component Depending To Result Of Condition With React Spring?

I'm struggling on rendering React component depending to result of condition. To be more accurate I'm working on Alarm clock App where you can set time when alarm should 'ring'. Th

Solution 1:

You're in a bit of a bind here because if you render the component conditionally in App, the transition leave in Ring is not going to have enough time to complete when the component is unmounted. Either the transition logic has to live in App, or you have to render Ring persistently like you already do with Alarm. It also needs to be tied to the showRing state via props - it can't control its own state because it depends on the parent.

I'd suggest persistently rendering the Ring component like this:

<Ringmessage={time.message}showRing={showRing}turnOff={() => setShowRing(false)} />

And inside it:

functionRing(props) {
  const { message, turnOff, showRing } = props;
  const ringTransitions = useTransition(showRing, null, {
    from: { position: "absolute", opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div>
      {ringTransitions.map(
        ({ item, key, props }) =>
          item && (
            <animated.divkey={key}style={props}className="overlay"><divclassName="inputBox"><h3>{message}</h3><aonClick={turnOff}>TURN OFF</a></div></animated.div>
          )
      )}
    </div>
  );
}