Как я могу сделать всплывающее уведомление React вид кода

Question

position принимает значение для transform: translateY().

Проблема в том, что я не могу вернуть значение position обратно в -100%. Как я могу вернуть значение через 3 секунды?

Это мой первый вопрос, поэтому, пожалуйста, извините, если его спросили неправильно.

let position = "-100%";

  if (message !== "") {
    position = "0";
    setTimeout(() => {
      position = "-100%";
      clearMessage();
    }, 3000);
  }

  return <StyledNotification show={position}>{message}</StyledNotification>;

Answer 1

Итак, я попытался реализовать это через состояние, но возвращалось сообщение об ошибке: Слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечное l oop. Затем я решил добавить метод жизненного цикла, чтобы отслеживать, какие изменения необходимы для запуска кода, чтобы избежать зацикливания. В моем случае изменить было сообщение . Тем не менее, спасибо всем за отзывы!

    const [position, setPosition] = useState("-100%");
    useEffect(() => {
      if (message !== "") {
        setPosition("0");
        setTimeout(() => {
          setPosition("-100%");
        }, 3000);
      }
    }, [message]);

Answer 2

используйте состояние для установки значения позиции

const [position, setPosition] = useState('')

  if (message !== "") {
    setPosition("0%");
    setTimeout(() => {
       setPosition("-100%");
      clearMessage();
    }, 3000);
  }

проверьте эту ссылку в песочнице: https://codesandbox.io/s/agitated-proskuriakova-pnqcg?fontsize=14&hidenavigation=1&theme=dark