React Typescript: Checkbox disabled using variable

Question

console.log(disabled) is returning true but the checkbox is not getting disabled.

let disabled: boolean;

const GroupChange = (value) => {
   var index = dropdownItems.findIndex(item => item.group == value);
   ...

   disabled = dropdownItems[index].deactivated;
}

Form with the Checkbox:

<Form.Item label="Gruppe" name="group">
   <Select onChange={GroupChange}>
      {dropdownItems.map((item, index) => <Select.Option value={item.group} key={index}>{item.group}</Select.Option>)}
   </Select>
</Form.Item>

<Form.Item label="Aktiv" name="active" valuePropName="checked">
   <Checkbox disabled={disabled} /> //<- is always active 
</Form.Item>
...

what if you do "disabled" instead of {disabled}

DJ Burb
– DJ Burb

2021-12-29 02:30:45 +00:00
Commented Dec 29, 2021 at 2:30 — DJ Burb
– DJ Burb, Commented Dec 29, 2021 at 2:30

Adam Jenkins · Accepted Answer · 2021-12-29 02:42:36Z

1

In AntDesign, you use something called dependencies:

<Form.Item label="Gruppe" name="group">
   <Select>
      {dropdownItems.map((item, index) => <Select.Option value={item.group} key={index}>{item.group}</Select.Option>)}
   </Select>
</Form.Item>
<Form.Item dependencies={['group']}>
 {({getFieldValue}) => {
    const groupValue = getFieldValue('group')
    const isDisabled = dropdownItems.find(item => item.group === groupValue)?.deactivated
    return (
      <Form.Item label="Aktiv" name="active" valuePropName="checked">
        <Checkbox disabled={isDisabled} />
      </Form.Item>
    )
 }}
</Form.Item>

You render a Form.Item with a dependencies prop. The child is a function that gets form methods as an argument and gets called whenever the values of the dependencies change.

You DO NOT need, onGroupChange anymore.

edited Dec 29, 2021 at 2:42

answered Dec 29, 2021 at 2:37

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

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

Collectives™ on Stack Overflow

React Typescript: Checkbox disabled using variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related