RESIDENT YES OR NO OPTIONS PROMPT
Fri Jun 30 2023 06:55:47 GMT+0000 (Coordinated Universal Time)
Saved by @JISSMONJOSE #react.js #css #javascript
""" <div className="row form-row mb-4 align-items-center"> <div className="col-md-6"> <label htmlFor="resident" className="form-label w-100 resident-label" > Are you a Resident of the UAE? </label> </div> <div className="col-md-6 d-flex justify-content-between align-items-center"> <OptionButtons options={residentOrNotOptions} selectedOption={resident} onOptionSelected={handleResidentOptionSelect} /> </div> </div> {/* row with columns for emirates id */} <div className="row form-row mb-5"> {/* Emirates ID Col */} <div className="col-md-6"> <label htmlFor="emiratesId" className="form-label w-100 emirates-id-label" > Emirates ID* </label> <input type="text" className="form-control emirates-id-input" id="emiratesId" placeholder="XXXX XXXX XXXX" defaultValue={userData.emiratesID} maxLength={15} onChange={(e) => setEmiratesID(e.target.value)} onInput={(e) => { const input = e.target as HTMLInputElement; input.value = input.value.replace(/\D/g, ''); setEmiratesID(input.value); }} {...register('emiratesID', { required: true, })} /> {/* handle errors */} {/* {formErrors.emiratesID && ( <span className="error-message">{formErrors.emiratesID}</span> )} */} </div> {/* passport expiry date col */} <div className="col-md-6"> <label htmlFor="emiratesIdExpiryDate" className="form-label w-100 emiratesId-expiry-date-label" > Emirates ID Expiry Date* </label> {/* Date Picker to handle emirates id expiry */} <DatePicker onChange={handleEmiratesExpiryDatePicker} value={emiratesIDExpiryDate} minDate={new Date().toISOString().split('T')[0].split('-').join('/')} renderInput={(params: any) => ( <TextField {...params} inputProps={{ ...params.inputProps, // readonly readOnly: true, placeholder: 'Choose Date', }} {...register('emiratesIDExpiryDate', { required: true, })} className="date-picker date-picker-input" /> )} className="date-picker-field" /> {/* handle errors */} {formErrors.emiratesIDExpiryDate && ( <span className="error-message">{formErrors.emiratesIDExpiryDate}</span> )} </div> </div> """ You are an experienced react developer. Client want some changes in form. Details were given in below bullet points: 1. When the value of resident props of OptionButtons is No, emiratesid and emirates expiry date datepicker should be disabled. Ie user should not be able to input or select any data in both fields. 2. if the value is Yes, both emiratesid and emirates expiry date datepicker are enabled. 3. Initialy when component is loaded, both were enabled. 4. It is disable only when user choose resident as No, else both the inputs were enabled. please update the code as per my above requirements.
Comments