How to disable button depending on the length of input value

user_9905979 0
Viewed 214

I want to make a simple quiz app in ReactJS. I created carousel cards. When the user answers the question, he will press the next button and a new question will appear.

I would like to prevent pressing the next button before writing any value in the text input.

I tried to achieve this with event.target.value.length property on the onChange event. It works on the first question properly. However, for the next questions, I need to fill in the text input and then remove it to be able to disable the next button.

So, the user cannot pass the first question without filling in the first input. But, he can pass the next questions with empty inputs.

Here is my functional component:

const [submitButton, enableSubmitButton] = useState({
        'isEnabled': false
      });

const handleChange = (event) => {
      if (event.target.value.length > 0) {
          enableSubmitButton({ 'isEnabled': true });
      } else {
          enableSubmitButton({ 'isEnabled': false });
      }
}

return (
     <React.Fragment>
         <Row>
           {posts.map((post) => (
                  <CardLayout key={ post.id } content={
                       <Label for={ 'question_' + post.id }>
                                  { post.question + ' ='}
                       </Label>
                       <Input id={ 'question_' + post.id } 
                              name={ 'question_' + post.id } 
                              onChange={ handleChange } />
                  } />
            ))}
          </Row>
          <Row>
               <Button type="submit" 
                       onClick={ next } 
                       disabled={ !submitButton.isEnabled }>
                       Next
                </Button>
          </Row>
     </React.Fragment>
)

How can I achieve to disable the next button depending on the length of all of the inputs values?

enter image description here

reactjs javascript
1 Answers

I am not sure if I understood the problem correctly, but here is my solution for the problem.

What I see as a problem is that you are disabling the button if the length is bigger than 0. Instead, you should check if it's smaller. So we need to change the logic to:

const [isDisabled, setIsDisabled] = useState(true);

const handleChange = (event) => {
    setIsDisabled(event.target.value.length <= 0) // will set isdisabled to true if there is no input
}

jsx:

 <React.Fragment>
         <Row>
           {posts.map((post) => (
                  <CardLayout key={ post.id } content={
                       <Label for={ 'question_' + post.id }>
                                  { post.question + ' ='}
                       </Label>
                       <Input id={ 'question_' + post.id } 
                              name={ 'question_' + post.id } 
                              onChange={ handleChange } />
                  } />
            ))}
          </Row>
          <Row>
               <Button type="submit" 
                       onClick={ next } 
                       disabled={isDisabled}>
                       Next
                </Button>
          </Row>
     </React.Fragment>
user_121237120
Related