Попробую, спасибо

Всем привет, обьясните пожалуйста почему после добавления , начинает счетчик прыгать
https://codesandbox.io/s/fragrant-hill-r1p4u?file=/src/App.js

let [seconds, setSeconds] = useState(30);

 useEffect(() => {
   const interval = setInterval(() => {
     if (seconds >= 1) {
       setSeconds(seconds - 1);
     }
   }, 1000);

   return () => clearInterval(interval);
 }, [seconds]);

Вот более чистый код

Спасибо )

как сделать чтобы при 1 рендере кнопки эти не слетали

при перезагрузке

а вы на работе когда вам необходимо новый компонент написать прям в проекте его пишете? может есть некие приемы, инструменты, трюки чтоб отдельно писать компонент? я слышал про некий Storybook, но не знаю насколько он популярен в компаниях.

сторибук упрощяет работу. если пишешь какой то свой набор компонентов или нужно расширить уже готовый, чтобы и дизайнеры и другие разрабы видели как поведет себя компонент в той или иной ситуации с разными пропсами.

с cra его интеграция очень проста. если сам пишешь конфиг - я так и не смог подружить его с модулями стилей.

Я прям в проекте. Сторибук пробовал в ПЕТ, хорошая библиотека для тестирования. Но надо посидеть с настройкой и внедрять ее в готовый проект может быть больно.

@ychebotaev мне снова нужна ваша помощ)))) я консолю пропсы fieldarray провреяю инпут на length в консоль прилетает но с задержкой в один символ

я уже всю голову сломал об эти чертовы пропсы

Покажите код

сек

<FieldArray
           name="subTask"
           render={({ push, pop, remove }) => (
             <div className="new-checklist-item">
               {props.values.subTask.length > 0 &&
                 props.values.subTask.map((task, index) => (
                   <div className="checklist-item-wrap" key={index}>
                     <label className="container_">
                       <Field
                         className="sub-checkbox"
                         name={`subTask.${index}.subCheckbox`}
                         type="checkbox"
                       />
                       <span className="checkmark_"></span>
                     </label>
                     <div
                       onChange={(event) => {
                         if (
                           task.subText.length === 1 &&
                           event.nativeEvent.data !== null
                         ) {
                           push({ subCheckbox: false, subText: "" });
                         } else if (
                           props.values.subTask[index].subText.length === 1
                         ) {
                           console.log("elseif");
                           remove(index, props.values.subTask);
                         }
                       }}
                     >
                       <Field
                         className="sub-text"
                         name={`subTask.${index}.subText`}
                         type="text"
                         placeholder="Add more"
                       />
                     </div>
                   </div>
                 ))}
             </div>
           )}
         />

мда лучше наверное скрин

сек