How to set a default value when loading?

[premdasvm]

Hi,

I've a drop down component which I need to set a default value when the component loads, so I can use that value to call the API first time. How can I achieve this? My code is as follows.

const branches = useSelector(state => state.userData.branches);
  const [open, setOpen] = useState(false);
  const [value, setValue] = useState(null);
  const [items, setItems] = useState([]);

  useFocusEffect(
    React.useCallback(() => {
      const _branch = branches.map(x => {
        return {
          label: x.name,
          value: x.id,
        };
      });
      setItems(_branch);
      getCartData()
    }, []),
  );

async function getCartData() {
   console.log(value) // I need the default value here once the component mounts
  }

<DropDownPicker
        open={open}
        value={value}
        items={items}
        itemKey={item => item.id}
        setOpen={setOpen}
        setValue={setValue}
        setItems={setItems}
        placeholder="Select Branch"
        style={{
          borderColor: 'white',
          marginVertical: '2%',
          shadowColor: '#000',
          shadowOffset: {
            width: 0,
            height: 2,
          },
          shadowOpacity: 0.23,
          shadowRadius: 2.62,

          elevation: 4,
        }}
        dropDownContainerStyle={{
          borderColor: 'grey',
        }}
        />

[Blizzardnya]

What about setting a default value in useState? And also in your example there are two "items" states, I guess one of them should be the "open" state?

[hossein-zare]

Hi @premdasvm

I didn't understand what you want to do, The description is confusing.

I need the default value here once the component mounts

The picker doesn't return any value, use useEffect.

useEffect(() => {  ...  }, []); // is called when the component mounts

[premdasvm]

Hi @hossein-zare ,

Sorry if my description confused you.

basically what I was trying do is, I've a dropdown picker on one of my screen, and when I navigate to that page I need to call an API and the parameter for the API will be value of the selected item in the dropdown picker, So when I first mount I thought there would be a value on my state value which is mapped to the drop-down-picker.

This is how I made it work,

  useFocusEffect(
    React.useCallback(() => {
      const _branch = branch.map(x => {
        return {
          label: x.name,
          value: x.id,
        };
      });
      setItems(_branch);
      let {id} = branch[0];
      getCartData(id);
    }, []),
  );
  
    useEffect(() => {
    getCartData(value);
  }, [value]);
  

so in my work around when the page mounts, I get the value from array then password to my api, after that the second useEffect takes care of it when the value changes in drop-down-picker

Is there any way to set a default value to the drop-down-picker once the component mounts? maybe the first element of the array passed in?

[hossein-zare]

@premdasvm

Remove the useEffect and try the onChangeValue prop:

<DropDownPicker
  onChangeValue={getCartData}

  ... />

https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage#onchangevalue

---

You don't need to map your items, Read: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/item-schema

<DropDownPicker
  schema={{
    label: 'name',
    value: 'id'
  }}
  ... />

[premdasvm]

@hossein-zare

Thanks onChangeValue worked two time for me then it didn't it works randomly, but the onSelectItem works like a charm.

        <DropDownPicker
          schema={{
            label: 'name',
            value: 'id',
          }}
          open={open}
          value={value}
          items={branch}
          key={value}
          itemKey="id"
          setOpen={setOpen}
          setValue={setValue}
          placeholder="Select Branch"
          onChangeValue={value => {
            console.log('value', value);
          }}
          onSelectItem={item => {
            console.log('selected', item);
          }}
          style={{
            borderColor: 'white',
            marginVertical: '2%',
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 2,
            },
            shadowOpacity: 0.23,
            shadowRadius: 2.62,

            elevation: 4,
          }}
          dropDownContainerStyle={{
            borderColor: 'grey',
          }}
        />

also how do I set a default value? the drop-down-picker is empty when the component mounts, I need it to have a value.!

[premdasvm]

@hossein-zare

My workaround for default value while the screen mounts

  useFocusEffect(
    React.useCallback(() => {
      setValue(id);
    }, []),
  );

[hossein-zare]

@premdasvm Sorry i'm a bit busy. I'll check it's behavior.

// faster
const [value, setValue] = useState(id);

[degerogretmen]

@hossein-zare This is not working. I am trying for hours everything but no way. I want to edit sth with dropdown and I need to show editing items value selected. Is anybody solved this?

[Asderel]

I am facing the same problem. I am triying to set some values by default once the component has mounted.

This is the state of the component and the useEffect

const [v, setV] = useState<ValueType[]>([]);

useEffect(() => {setValue(defaultValue)}, []);

This is the code of the Dropdown

<DropDownPicker value={value} setValue={setValue} open={open} setOpen={setOpen} items={items} listMode={listMode} onSelectItem={handlerOnChange} itemKey={key} schema={{value, label}} searchable />

So, I have an useEffect that calls setValue but when I open the Dropdown the value stored in the state value does not appear as selected in the item list. I tried to do the same thing with the multiple selection activated and it seems to behave the same way

I noticed that if I try to select (or deselect if multiple prop is passed) a new item, the callback onSelectItem works just like if no item was selected previously, meaning, it is discarding the values stored in the value state

The options passed to the Dropdown comes from Redux and I can assure that does not change, just in case it matters

Any clue?

[ali92alaa]

Hey all!

I was facing the same issue with the "Default Value" I found that if you initialize the "value" state with the string value of the default selection, it loads with the correct value.

The useEffect(() => {setValue(defaultValue)}, []); approach does not work

Example: const [value, setValue] = React.useState<any>(defaultValue ? defaultValue : null); where if const defaultItem = {label: "xyz", value: "abc"} then const defaultValue = defaultItem.value

I hope that helps.

[FranzPichardoR]

@hossein-zare

My workaround for default value while the screen mounts

  useFocusEffect(
    React.useCallback(() => {
      setValue(id);
    }, []),
  );

This worked for me! Care to explain why this works and useEffect doesn't?