how to set button disable in certain condition in react?

Question

import PhoneInput, { formatPhoneNumber, formatPhoneNumberIntl, isValidPhoneNumber } from 'react-phone-number-input';

const [fields, setFields] = React.useState([{ value: null }]);

<PhoneInput
  id="phoneNumbers1"
  type="text"
  placeholder="Enter phone number "
  value={field.value || ""}
  defaultCountry="US"
  international
  name="phoneNumbers"
  error={disable}
  autoComplete='off'
  onBlur={formik.handleBlur}
  onChange={(e) => handleChange(idx, e)}
  onClick={() => setIndex(idx)}
/>
<button
  type="button"
  hidden={fields.length > 1}
  data-value={fields.length}
  disabled={!fields[0]?.value && !(isValidPhoneNumber(fields[0]?.value ||''||fields.length<10))}
  onClick={() => handleAdd()}
>
  + Phone
</button>

Inside button inside disable property if I try to give condition that button is disabled until user give 10 digit phone number with condition field.length < 10. It throws an error "TypeError: A text for parsing must be a string." What should be the condition inside disable attribute that until user give 10 digit phone number button should disable?

You can do String(fields).length. This will always provide you with the length weather it exists or not — Rajesh Paudel
– Rajesh Paudel, Commented Dec 3, 2021 at 5:46
@DoubleH Code edits are ok, fixing whitespace and readability issues, etc... but the code should maintain the OPs original intent. Don't entirely change the logic. — Drew Reese
– Drew Reese, Commented Dec 3, 2021 at 6:07
function handleChange(i, event) { if (event) { const values = [...fields]; values[i].value = event; setFields(v => values); //alert(JSON.stringify(values)) formik.setFieldValue("phoneNumbers", { primaryPhone: values[0]?.value, secondaryPhone: values[1]?.value }); } } i have handlechange function in this way how should i replace this — Sougata Mukherjee
– Sougata Mukherjee, Commented Dec 3, 2021 at 6:13

Drew Reese · Accepted Answer · 2021-12-03 06:27:18Z

2

If I had to guess here, it seems isValidPhoneNumber may be expecting a string value, but if fields[0]?.value is falsey, and '' is obviously falsey, the boolean fields.length < 10 value is passed. I suspect you want this last condition outside of the isValidPhoneNumber validator function. I also suspect you want to check the length of the value, not the length of the fields array.

disabled={
  !isValidPhoneNumber(fields[0]?.value || "") ||
  fields[0]?.value?.length < 10
}

edited Dec 3, 2021 at 6:27

answered Dec 3, 2021 at 5:44

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Alan Over a year ago

I've seen this a few times, but what does the shorthand notation in fields[0]?.value mean? Searching for the web doesn't give great results.

kp singh Over a year ago

@Alan search for optional chaining operator

Drew Reese Over a year ago

@SougataMukherjee Yes, ?. is the Optional Chaining operator, useful for accessing into potentially null/undefined object properties (and much more! 😀). "Shorthand" for fields[0] && fields[0].value.

Sougata Mukherjee Over a year ago

yes sir previously i was bit confuse about the conditional operator but it ok

MagnusEffect · Accepted Answer · 2021-12-03 06:18:38Z

1

I think the last condition is checking the length of array instead the length of the first value of the fields array i.e. fields[0].value.

Try to use

disabled={!fields[0]?.value && !(isValidPhoneNumber(fields[0]?.value ||''||fields[0]?.value.length<10))}

answered Dec 3, 2021 at 6:18

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

Collectives™ on Stack Overflow

how to set button disable in certain condition in react?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related