refactor: Fix Default Value

[anastely]

I have an issue with the defaultValueByIndex,
So I provide a prop named isReset when triggering it I call the reset().

  useEffect(() => {
    isReset && reset();
  }, [isReset]);

So in this way, I can reset the default index.

Note:
I use Prettier for Code Formatting.

[anastely]

You Know :-D, We can do it like this

useEffect(() => {
      reset();
   }, [isReset])

In initial render will be reset, but otherwise will be triggering in every change to isReset this way better, What do you think?
If that's way good I can send another PR.

[anastely]

@AdelRedaa97 Thanks for Accepting this PR
Can you check this comment please?

[AdelRedaa97]

@AdelRedaa97 Thanks for Accepting this PR
Can you check this comment please?

Hello @anastely ,
I have changed the way that reset the dropdown so that you can reset by using a Ref

import React, { useRef } from 'react';  
.....  
const dropdownRef = useRef({});  
.....  
onPress={()=>{ dropdownRef.current.reset() }};  
.....  
<SelectDropdown  
   data={types}  
    ref={dropdownRef}  
    .....  
/>  

[abid-2362]

For typescript, ref should be defined as

const dropdownRef = useRef<SelectDropdown>(null);

[fitri612]

const dropdownRef = useRef({});  

  const funcReset = () => {
    dropdownRef.current.reset();
    setSelectedType('Type');
    setSelectedJenis('Jenis');
  };

 <View style={styles.wpFilter}>
          <SelectDropdown
            data={dataType}
            ref={dropdownRef}
            onSelect={(selectedItem, index) => {
              onHandleSelectedType(index);
            }}
            selectedItem={selectedType}
            defaultButtonText={selectedType}
            buttonStyle={{
              width: isTablet
                ? screenWidth - RFValue(250)
                : screenWidth - RFValue(220),
              height: isTablet ? 60 : 50,
              backgroundColor: '#fff',
              marginBottom: 10,
              justifyContent: 'center',
              alignItems: 'center',
              borderWidth: 1,
              borderColor: 'rgba(0, 0, 0, 0.1)',
              borderRadius: 10,
            }}
            buttonTextStyle={{
              fontSize: RFValue(10),
              fontFamily: 'Poppins-Regular',
              color: '#666',
            }}
            renderDropdownIcon={() => {
              return (
                <Entypo name="chevron-down" size={RFValue(20)} color="#666" />
              );
            }}
            dropdownStyle={{
              width: isTablet
                ? screenWidth - RFValue(250)
                : screenWidth - RFValue(220),
              height: 150,
              backgroundColor: '#fff',
              borderWidth: 1,
              borderColor: '#ccc',
              borderRadius: 5,
              fontSize: RFValue(10),
            }}
          />
          <SelectDropdown
            data={dataJenis}
            ref={dropdownRef}
            onSelect={(selectedItem, index) => {
              onHandleSelectedJenis(index);
            }}
            selectedItem={selectedJenis}
            defaultButtonText={selectedJenis}
            buttonStyle={{
              width: isTablet
                ? screenWidth - RFValue(250)
                : screenWidth - RFValue(220),
              height: isTablet ? 60 : 50,
              backgroundColor: '#fff',
              marginBottom: 10,
              justifyContent: 'center',
              alignItems: 'center',
              borderWidth: 1,
              borderColor: 'rgba(0, 0, 0, 0.1)',
              borderRadius: 10,
            }}
            buttonTextStyle={{
              fontSize: RFValue(10),
              fontFamily: 'Poppins-Regular',
              color: '#666',
            }}
            renderDropdownIcon={() => {
              return (
                <Entypo name="chevron-down" size={RFValue(20)} color="#666" />
              );
            }}
            dropdownStyle={{
              width: isTablet
                ? screenWidth - RFValue(250)
                : screenWidth - RFValue(220),
              height: 150,
              backgroundColor: '#fff',
              borderWidth: 1,
              borderColor: '#ccc',
              borderRadius: 5,
              fontSize: RFValue(10),
            }}
          />
        </View>

<Button title={'Reset'} onPress={funcReset} />

why value not solve when i click function reset ?
        
        

[ajayyorkie]

How to use disabledIndexs?