Disable text/input field in React & Nextjs depending on Dropdown Value

Question

I'm new to React and trying to disable an input field when the dropdown value is selected as "No" and enable when Yes. I'm using React, Next Js, React-bootstrap & formik.

function Input(){
const [disabled, setDisabled] = useState(false);
 const [radioValue, setRadioValue] = React.useState('');

function handleClick() {
            if (radioValue === "Yes") {
                console.log('Text Enabled')
            } else {
                setDisabled(!disabled);
                console.log('Text disabled')
            }

        }

return(

<div>

<Form>
     
    <Form.Group controlId="usage_ppe" as={Col}>
        <Form.Label className="required-field font-Montserrat">{getTranslatedText('Usage')}</Form.Label>
           <Col className="p-0">
             <Dropdown
                  className="px-4 py-2 bg-green-1"
                  as="select"
                  value={radioValue}
                  onChange={e => {
                 setRadioValue(e.target.value);
                  }}
               >
                <option value="Select">Select</option>
                <option value="Yes">Yes</option>
                <option value="No">No</option>
            </Dropdown>
          </Col>
          {errors.usage_ppe && touched.usage_ppe && <p>{errors.usage_ppe}</p>}
  </Form.Group>


   <Form.Group controlId="usage_of_ppe_byWorkers" as={Col} 
                disabled={disabled} 
             onClick={handleClick}

/>

       <Form.Label className="font-Montserrat" >{getTranslatedText('If Yes, Enable Input')}</Form.Label>
               <Form.Control
                 type="text"  
                  className={errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers && 'has-error'}                                
                 name="usage_of_ppe_byWorkers"
                 placeholder="If Yes, Usage of PPE by STP"
                 onChange={handleChange}
                 onBlur={handleBlur}
                 value={values.usage_of_ppe_byWorkers || ""}
              />
              {errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers &&
               <p>{errors.usage_of_ppe_byWorkers}</p>}
   </Form.Group>
</Form>
</div>
)

}

Where am I going wrong here, it also logs the value Yes in the handleClick function, When we select the dropdown value as Yes It won't disable the text input that I've next to it. I'm confused about mapping the value. I don't understand What am I doing wrong here!

Thanks in advance!

Answer 1

Form.Group is not intended to work as a standalone Input Component. You want to have more Inputs inside a unique controller, and for this with react bootstrap you use the fieldset tag.

example with disable prop with disable:

    <fieldset disabled={disabled}>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledTextInput">Disabled input</Form.Label>
          <Form.Control id="disabledTextInput" placeholder="Disabled input" />
        </Form.Group>
        <Form.Group className="mb-3">
          <Form.Label htmlFor="disabledSelect">Disabled select menu</Form.Label>
          <Form.Select id="disabledSelect">
            <option>Disabled select</option>
          </Form.Select>
        </Form.Group>
      <fieldset/>

---

You can also try to add the disabled directly inside Form.Control tag

full code should be:

   <Form.Group controlId="usage_of_ppe_byWorkers" as={Col} 
                disabled={disabled} 
             onClick={handleClick}

/>

       <Form.Label className="font-Montserrat" >{getTranslatedText('If Yes, Enable Input')}</Form.Label>
               <Form.Control
                 type="text"  
                  className={errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers && 'has-error'}                                
                 name="usage_of_ppe_byWorkers"
                 placeholder="If Yes, Usage of PPE by STP"
                 onChange={handleChange}
                 onBlur={handleBlur}
                 value={values.usage_of_ppe_byWorkers || ""}
                 disabled={disabled}
              />
              {errors.usage_of_ppe_byWorkers && touched.usage_of_ppe_byWorkers &&
               <p>{errors.usage_of_ppe_byWorkers}</p>}
   </Form.Group>

thanks