Can you do a cascading / dependent dropdown with this dropdown picker?

[ahmadaba14]

Hi, basically as shown in the gif, this is what I'm trying to do but on react native, but can't think of any solution to it. Its a cascading dropdown where the dropdown is dependent to the data before that. I've seen some codes of React JS but nothing specific for React Native. So if anyone can help me on this, that would be great. Thanks.

[hossein-zare]

Hi,

const [country, setCountry] = useState(null);
const [countries, setCountries] = useState([
  {label: 'USA', value: 'usa'},
]);

const [state, setState] = useState(null);
const [states, setStates] = useState([]);

const [city, setCity] = useState(null);
const [cities, setCities] = useState([]);

const countryChanged = (value) => {
  setState(null);
  setStates([]); // Add states based on the value (country)

  setCity(null);
  setCities([]);
};

const stateChanged = (value) => {
  setCity(null);
  setCities([]);  // Add cities based on the value (state)
};

<DropDownPicker
  value={country}
  setValue={setCountry}
  items={countries}
  setItems={setCountries}
  onChangeValue={countryChanged}
  ...
/>

<DropDownPicker
  value={state}
  setValue={setState}
  items={states}
  setItems={setStates}
  onChangeValue={stateChanged}
  ...
/>

<DropDownPicker
  value={city}
  setValue={setCity}
  items={cities}
  setItems={setCities}
  ...
/>