Reset the DropDown Value

[avadheww]

Is your feature request related to a problem? Please describe. I am having 2dropdown in my screen, setting up the value of 2nd DropDown based on the selection of first dropdown's value.

Describe the solution you'd like I am having 2dropdown in my screen, setting up the value of 2nd DropDown based on the selection of 1st dropdown's value. My 2nd dropdown is multi select, so when value of 1st dropdown is updating at that time value in 2nd dropdown is changing but selected values are not reseting.

Additional context Is there any solution for overcome this issue?

[hossein-zare]

Hello,

You need to use the controller feature to be able to reset the state of your picker by this.controller.reset(); https://github.com/hossein-zare/react-native-dropdown-picker#controller

[avadheww]

Yes that I found but where to I add that? In 2nd dropdown right? And I am using it in function component, can you please help me how to add this event in dropdown, i didn't getting clear with instance and controller

[hossein-zare]

Heres an example for functional components: https://github.com/hossein-zare/react-native-dropdown-picker#functional-components

Everything is clear.

to reset the state use controller.reset();

[mamin75dev]

I have an issue in controller.reset(); I pass controller props to a dropdown in my code as same as you explain in the documentation. but I got this error TypeError: Cannot read property 'reset' of undefined I use functional components in my app. please help me. @hossein-zare

[avadheww]

@mamin75dev can you please post your code snippets here so i can also get idea how to implement it

[kisminya]

I have the same error in controller.reset(). I use functional component too.

[hossein-zare]

@mamin75dev @kisminya

Hello, I can't tell you what to do or even if there's a bug without your code. Please send your code here.

[kisminya]

const [uvegek, setUvegek] = React.useState([{label:'Bármelyik',value:null}]);
const [selectedUveg, setSelectedUveg] = React.useState(null);
let controller;

<DropDownPicker
            zIndex={3000}
            items={uvegek}
            controller={instance => controller = instance}
            onChangeList={(items, callback) => {
              new Promise((resolve, reject) => resolve(setUvegek(items)))
                  .then(() => console.log("SETUVEGEK MODIFIED RESET DONE"))
                  .catch(() => {});
          }}
            dropDownStyle={styles.dropDownStyle}
            containerStyle={styles.containerStyle}
            style={styles.mainDropDownStyle}
            itemStyle={styles.itemStyle}
            onChangeItem={(item) => {
              setSelectedUveg(item.value)
              onSelectChange('Üveg',item)
            }}
            defaultValue={selectedUveg}
            placeholder={""}
            placeholderStyle={styles.placeholderStyle}
          />

All I do is fill up my 'uvegek' array in useEffect. I think I do everything based on the docs. When i want to use the controller objet I simply cant. Its undefined so probably the controller instance does not set the controller.

[hossein-zare]

@kisminya

Placeholder You may want to have a placeholder while the default value is null or an empty array.

If you want to show the placeholder your default value has to be null, While your item's value is null so it's a conflict with the placeholder. Just change the value to solve the issue.

const [uvegek, setUvegek] = React.useState([{label:'Bármelyik',value: null}]); // value: 1   for example

[avadheww]

#FirstDroDown

<DropDownPicker
                            style={{
                                paddingVertical: 10,
                                backgroundColor: '#f1f1f1',
                                borderTopLeftRadius: 10, borderTopRightRadius: 10,
                                borderBottomLeftRadius: 10, borderBottomRightRadius: 10,

                            }}
                            itemStyle={{
                                justifyContent: 'flex-start'
                            }}
                            dropDownStyle={{
                                backgroundColor: '#f1f1f1',
                                borderBottomLeftRadius: 20, borderBottomRightRadius: 20
                            }}
                            defaultValue={'top'}
                            items={[
                                { label: 'Top', value: 'top' },
                                { label: 'Bottom', value: 'bottom' },
                                { label: 'Shoe', value: 'shoe' },
                            ]}
                            onChangeItem={item => updateCategory(item.value)}
                        />

#SecondDropDown

<DropDownPicker
                            items={size}
                            controller={instance => controller = instance}
                            onChangeList={(items, callback) => {
                                new Promise((resolve, reject) => resolve(setSizeArr()))
                                    .then(() => console.log("Reset Done"))
                                    .catch(() => { });
                            }}
                            style={{
                                paddingVertical: 10,
                                backgroundColor: '#f1f1f1',
                                borderTopLeftRadius: 10, borderTopRightRadius: 10,
                                borderBottomLeftRadius: 10, borderBottomRightRadius: 10,

                            }}
                            multiple={true}
                            // multipleText="%d items have been selected."
                            min={1}
                            max={10}
                            itemStyle={{
                                justifyContent: 'flex-start'
                            }}
                            defaultValue={'S' || '5'}
                            dropDownStyle={{
                                backgroundColor: '#f1f1f1',
                                borderBottomLeftRadius: 20, borderBottomRightRadius: 20
                            }}
                            placeholder={""}
                            onChangeItem={item => {
                                setSizeArr(item);
                            }}
                        />

In updateCategory function I am changing the items of 2nd dropdown, values are changing but 2nd dropdown is multiselect so array is not reseting

[hossein-zare]

@avadheww First of all add the useState functions, updateCategory, setSizeArr to the issue like const [selectedUveg, setSelectedUveg] = React.useState(null);

Second, Your defaultValue can't be a hard-coded value you have to give it a state variable like defaultValue={category}

Note that the second dropdownpicker's value has to be an array look at the following example:

const [countries, setCountries] = React.useState([]);

<DropDownPicker
    multiple={true}
    defaultValue={countries}
    onChangeItem={(item) => setCountries(item)}
...
/>

[avadheww]

I have tried with declare two state variables but not able to reset the array of second dropdown.

@hossein-zare can you please add the code and send again?

[avadheww]

const [uvegek, setUvegek] = React.useState([{label:'Bármelyik',value:null}]);
const [selectedUveg, setSelectedUveg] = React.useState(null);
let controller;

<DropDownPicker
            zIndex={3000}
            items={uvegek}
            controller={instance => controller = instance}
            onChangeList={(items, callback) => {
              new Promise((resolve, reject) => resolve(setUvegek(items)))
                  .then(() => console.log("SETUVEGEK MODIFIED RESET DONE"))
                  .catch(() => {});
          }}
            dropDownStyle={styles.dropDownStyle}
            containerStyle={styles.containerStyle}
            style={styles.mainDropDownStyle}
            itemStyle={styles.itemStyle}
            onChangeItem={(item) => {
              setSelectedUveg(item.value)
              onSelectChange('Üveg',item)
            }}
            defaultValue={selectedUveg}
            placeholder={""}
            placeholderStyle={styles.placeholderStyle}
          />

All I do is fill up my 'uvegek' array in useEffect. I think I do everything based on the docs. When i want to use the controller objet I simply cant. Its undefined so probably the controller instance does not set the controller.

is it your first dropdown or second?

[kisminya]

Third.

[hossein-zare]

An example of the controller in functional components where the dropdownpicker asks us to select our favorite countries.

import React from 'react';
import {
  Button
} from 'react-native';

import DropDownPicker from 'react-native-dropdown-picker';

export default function FavCountriesScreen() {
  const [items, setItems] = React.useState([
    {label: 'UK', value: 'uk'},
    {label: 'France', value: 'france'},
  ])
  const [countries, setCountries] = React.useState([]);
  let controller;

  return (
    <>
      <DropDownPicker
        items={items}
        placeholder="Select your favorite countries"
        defaultValue={countries}
        containerStyle={{height: 40, marginBottom: 100}}
        controller={instance => controller = instance}
        onChangeList={(items, callback) => {
          new Promise((resolve) => resolve(setItems(items)))
            .then(() => callback())
              .catch(() => {});
        }}
        onChangeItem={(item) => {
          setCountries(item);
        }}
        multiple={true}
      />

      <Button onPress={() => controller.reset()} title="RESET THE COUNTRIES" />
    </>
  );
}

[avadheww]

Thanks @hossein-zare With the help of reference able to solve the issue

[sriramharibabu]

@avadheww Could you please share how you solved the issue of resetting the second dropdown from the first dropdown using controller ?