Как удалить компонент после проигрывания таймера?

Question

[KrotKrotKrotTest]

Как удалить компонент из дом дерева после того как анимация закончится?

useEffect(() => {
    let timer = [];
    for (let i = 0; i < activeClass.length; i++) {
      setTimeout(() => {
        timer[i] = setActiveClass((previousValue) => {
          let newValue = [...previousValue];
          // update the value of className here
          newValue[i] = styles.movementDown;
          return newValue;
        });
      }, 8000 * (i + 1)); // delay 8s
      autoClickButton();
    }
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <>
      {console.log("props.checkPlay11111", props.checkPlay)}
      {/* <div className={classNames(styles.coupon)}>
        <div className={styles.couponContent}>
          <div className={styles.number}>
            {props.ticket ? props.ticket.code : ""}
          </div>
          <div className={styles.window}>
            {props.window ? props.window.name : ""}
          </div>
        </div>
      </div> */}
      {activeClass.map((item, index) => (
        <div className={classNames(styles.coupon, item)} key={index}>
          <div className={styles.couponContent}>
            <div className={styles.number}>
              {props.ticket ? props.ticket.code : ""}
            </div>
            <div className={styles.window}>
              {props.window ? props.window.name : ""}
            </div>
          </div>
        </div>
      ))}

Answer 1

[TheSnegok]

Добавить useState с булевым значением, сетаешь в него false когда заканчивается твой таймер, и если он true то показываешь нужный компонент, если false то null, можно так: state && component или с помощью условного оператора ?.