Как правильно синхронизировать поле формы с состоянием кнопки?

Question

[kfedor]

Есть React компонент формы. У него 2 состояния - состояние инпута и состояние disabled, которое должно включать и выключать кнопку. Проблема в том, что setIsDisabled срабатывает не сразу, а только после второго нажатия. Почему так, как можно исправить?

import React, { useState } from 'react';

export const AddTodoForm = () => {
  const [todo, setTodo] = useState('');
  const [isDisabled, setIsDisabled] = useState(true);

  const onChangeHandle = (e) => {
    setTodo(e.target.value);
    todo ? setIsDisabled(false) : setIsDisabled(true);
  };

  const onSubmitHandler = (e) => {
    e.preventDefault();
    setTodo('');
  };

  return (
    <form className='mb-5' onSubmit={onSubmitHandler}>
      <input
        type='text'
        value={todo}
        onChange={onChangeHandle}
        className='rounded-md py-2 px-5'
        placeholder='Мне нужно...'
      />
      <button
        type='submit'
        className='ml-4 rounded-md py-2 px-5 bg-blue-300 text-center disabled:bg-blue-100 disabled:text-gray-400'
        disabled={isDisabled}
      >
        Добавить задачу
      </button>
    </form>
  );
};

Answer 1

[kfedor]

Все, ночью нужно спать.
в onChangeHandle поменял стейт todo на e.target.value и все заработало.