Удаляются в todo list задачи setInterval

Знаю что для решения данной задачи нужно использовать useEffect, setInterval....Но никак не пойму как решить. Помогите пжл...

Пример: Пользователь нажал на кнопку добавить три раза. В списке появилось три элемента.

  1. Исчезнет через 13 секунд
  2. Исчезнет через 25 секунд
  3. Исчезнет через 15 секунд.

По истечению 13 секунд, из списка будет удален 1 элемент. И он станет вот таким:

  1. Исчезнет через 12 секунд
  2. Исчезнет через 2 секунды

Ответы (1 шт):

Автор решения: teran

вот вам без реакта

$("button").click(function(){
   let rnd = Math.floor(25*Math.random());
   $("<li>").attr('data-time', rnd)       
       .appendTo("#list") ;
});

setInterval(function(){
   $("li").each(function(){
      let ts = $(this).attr('data-time');      
      if (--ts) {
          $(this).attr('data-time', ts);
      } else {
          $(this).remove();
      }
   });
}, 1000);
li::after {
   content: "исчезнет через " attr(data-time);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>add</button>
<ul id="list"></ul>

→ Ссылка