Круги

Последняя часть: круги. Бегуны и пловцы засекают каждый круг одним щелчком, пока секундомер продолжает идти. У вашего секундомера появится кнопка «Круг».

Задача. Щелчок по «Круг» сохраняет время, которое секундомер показывает в этот момент. Круги выводятся под кнопками, в списке с классом laps, новые сверху, каждый в виде Круг 2: 7.4: номер круга и его время. «Сброс» очищает список. А поскольку круг имеет смысл только пока время идёт, пока секундомер остановлен, кнопка «Круг» отключена.

Советы:

• Храните круги в состоянии как массив объектов, например { number: 2, time: 74 }, с временем в десятых долях, как оно хранится в секундомере.
• «Новые сверху» значит, что новый круг идёт в начало массива: setLaps((laps) => [newLap, ...laps]).
• Номер нового круга на единицу больше числа кругов на данный момент. У каждого круга свой номер, поэтому он хорошо подходит на роль key.

Это весь проект. Ваш секундомер хранит три части состояния: время, работает ли он и круги. Один эффект запускает интервал, пока секундомер работает, а его очистка останавливает интервал, что бы ни изменило состояние — «Стоп» или «Сброс». В следующем уроке, «Рефы и собственные хуки», вы поставите курсор в текстовое поле, сохраните значения, которые страница не показывает, и напишете собственные хуки.