Selecting option A enables another select dropdown

[GalliLuca]

Hi! I've been struggling with this...

I have 2 selects, and the first one has two values: "present" and "absent".
The second select is disabled, and has to be enabled only if you select "present" in the other one.
How do I do it? I'll show my solution that obviously didn't work because the second select doesn't get alerted :)

Thanks for your kind help!

[manjushsh]

@GalliLuca Please try this way:

import { useState } from "react";
import Select from "react-select";
import "./styles.css";

export default () => {
  const [isEffussionDisabled, updateEffussionDisabled] = useState(
    optionsAbsentPresent[0]
  );
  const [secondSelectValue, updateSecondSelectValue] = useState(null);
  return (
    <div className="App">
      <span>Is present or absent</span>
      <Select
        value={isEffussionDisabled}
        onChange={updateEffussionDisabled}
        options={optionsAbsentPresent}
      />
      <br />
      <br />

      <span>Second Select</span>
      <Select
        value={secondSelectValue}
        onChange={updateSecondSelectValue}
        options={secondOptions}
        isDisabled={isEffussionDisabled && isEffussionDisabled.value === 0}
      />
    </div>
  );
};

const optionsAbsentPresent = [
  {
    value: 0,
    label: "absent"
  },
  {
    value: 1,
    label: "present"
  }
];

const secondOptions = [
  {
    value: 0,
    label: "Option 1"
  },
  {
    value: 1,
    label: "Option 2"
  },
  {
    value: 2,
    label: "Option 3"
  }
];

Codesandbox Link

[GalliLuca]

@manjushsh thanks for your help, it works! Only thing it's missing is:
I choose present -> I choose Option 1 and 2 in the second select (it's a multiple one) -> After that, I choose absent again.
In this case I would like to empty the second select (in our example, unselect Option 1 and 2).
How do I do it? Sorry for taking your time!

[manjushsh]

@GalliLuca , You can do something like this:

const firstSelectOnChange = (option) => {
    updateEffussionDisabled(option);
    if (option.value === 0) updateSecondSelectValue(null);
  };

and in select:

<Select
        value={isEffussionDisabled}
        onChange={firstSelectOnChange}
        options={optionsAbsentPresent}
      />

This will reset select value to null.
I have updated Codesandox with changes.

[GalliLuca]

Thank you very much @manjushsh , you helped a lot!
Have a good day 😊

[manjushsh]

Welcome :)