React how to disable submit button until form values are input

Question

I'd like to keep the submit button in my form disabled until the values of the each input are at least one character, not including white space. I tried using trim() and it seems to work until I click submit.

Here is my Form component:

export function Form(props) {
  const { form, inputChange, postQuiz } = props;

  const onChange = () => {

    inputChange()
  }

  const onSubmit = evt => {
    evt.preventDefault()
    const question_text_input = document.getElementById("newQuestion");
    const question_text = question_text_input.value
    const true_answer_text_input = document.getElementById("newTrueAnswer");
    const true_answer_text = true_answer_text_input.value
    const false_answer_text_input = document.getElementById("newFalseAnswer");
    const false_answer_text = false_answer_text_input.value
    postQuiz({ question_text, true_answer_text, false_answer_text })
  }

  return (
    <form id="form" onSubmit={onSubmit}>
      <h2>Create New Quiz</h2>
      <input onChange={onChange} placeholder="Enter question" />
      <input onChange={onChange} placeholder="Enter true answer" />
      <input onChange={onChange} placeholder="Enter false answer" />
      <button 
      id="submitNewQuizBtn"
      disabled={
        form.newFalseAnswer.trim().length >= 1
        && form.newTrueAnswer.trim().length >= 1
        && form.newQuestion.trim().length >= 1
        ? ""
        : "disabled"
      }
      >
        Submit new quiz
      </button>
    </form>
  )
}

export default connect(st => st, actionCreators)(Form)

With the code above, the submit button stays disabled until I type at least one character in each input (doesn't count whitespace, like I wanted), but as soon as I click submit I get the error: Uncaught TypeError: Cannot read properties of undefined (reading 'trim').

I don't understand why that happens. Is using trim() on the form Object incorrect?

Answer 1

You can achieve that using two states in your component. One for input and another for the button.

const App = () => {
  const [input, setInput] = useState('') // For input
  const [isdisabled, setIsDisabled] = useState(false) // For button

  // when input is changing this function will get called
  const onChange = (e) => {
    setInput((prevState) => (e.target.value))
    if(e.target.value.trim().length < 1) {   // Checking the length of the input
      setIsDisabled(true)  // Disabling the button if length is < 1
    } else {
      setIsDisabled(false)
    }
  }

  const onSubmit = (e) => {
    e.preventDefault()
    // Code...
  }

  return (
    <div className="App">
     <form onSubmit={onSubmit}>
      <input type='text' placeholder='email' value={input} onChange={onChange} />
      <button id='button' type='submit' disabled={isdisabled}>Submit</button>
     </form>
    </div>
  );
}

If you have multiple inputs change the onChange function and input state accordingly.