'React native select dropdown library

I am using select dropdown library to show my dropdowns. In jsx when I choose category from that 1st dropdown the other dropdown appear according to which category i selected. The problem I am facing is that after choosing item from 2nd dropdown if I select category again form 1st dropdown the 2nd dropdown don't get re render but its list get re render but it shows selected value of previous one. Is there any way to reset the dropdown. I tried using setstate on onChangeText function of dropdown but got error: too many render limit reach.

 import * as React from 'react';
import {
    Text,
    TextInput,
    View,
    Image,
    ScrollView,
    ActivityIndicator,
    ToastAndroid,
    TouchableOpacity,
  } 
from 'react-native'
import ImagePicker from 'react-native-image-crop-picker';
import { useState,useEffect,useRef,useMemo} from 'react';
import SelectDropdown from 'react-native-select-dropdown'
import LinearGradient from 'react-native-linear-gradient';
import questionStyle from './questionStyle.js';
import database from '@react-native-firebase/database';
import storage from '@react-native-firebase/storage';
import {allAccessories} from './allAccessories.js'
import {mobItems} from '../electricAccessories/mobile.js'

function questionsItem({navigation,route}) {
    const Category = ["Electronic", "Personal Accessories", "Clothes Accessories", "Muscial Accessories"]
    const itemElectric = ["Mobile", "Laptop", "Smart Watch", "Handfree"]
    const itemCloth = ["Scarf", "Jacket", "Sweater", "Belt"]
    const itemPersonal = ["Bracelets", "Necklace", "Earrings", "rings"]
    const itemMusical = ["Guitar", "Piano", "Speaker", "Mic"]
    const [items,setitem]=useState("")
    const selectedCategory_item=useRef()
    const [itemCategory,setitemCategory]=useState("")
    const { userEmail } = route.params;
    // const item=props.route.params.itemId
    // useEffect(() => {
    //     console.log(userEmail)
    //   });
    // let q1=useRef('')
    // let q2=useRef('')
    // let q3=useRef('')
    // let q4=useRef('')
    // let q5=useRef('')
    // let q6=useRef('')


    // function storing_questions(){
    //    q1=mobItems().mobileBr
    //    q2=mobItems().mobileModel
    //    q3=mobItems().mobileTime
    //    q4=mobItems().withAcc
    //    q5=mobItems().attend
    //    q6=mobItems().stillon
    // console.log(q1,q2,q3,q4,q5,q6,email.current,contact.current,regNo.current,
    // itemCategory,items,location.current,path)
    // }

    function select(item_sel){
      return allAccessories(item_sel)
    }
   
function major(item){ 
      if(item =='Electronic'){
       return(
        <SelectDropdown
          data={itemElectric}
            buttonStyle={questionStyle.dropStyle}
            buttonTextStyle={{fontFamily:"Pacifico-Regular",
            color:"grey",
            fontSize:15
        }}
            dropdownStyle={{backgroundColor:"white",
            borderRadius:10,
        }}
          onSelect={(selectedItem, index) => {
             setitem(selectedItem)
          }}
          defaultButtonText='Choose Electronic item' 
          buttonTextAfterSelection={(selectedItem, index) => {
            return selectedItem
          }}
          rowTextForSelection={(item, index) => {
            return item
          }}
        />
       ) 
      }
    if(item =='Clothes Accessories'){ 
         return(
      <SelectDropdown
        data={itemCloth}
        buttonStyle={questionStyle.dropStyle}
          buttonTextStyle={{fontFamily:"Pacifico-Regular",
          color:"grey",
          fontSize:15
      }}
          dropdownStyle={{backgroundColor:"white",
          borderRadius:10,
      }}
        onSelect={(selectedItem, index) => {
          setitem(selectedItem)
        }}
        defaultButtonText='Choose Clothing item'
        buttonTextAfterSelection={(selectedItem, index) => {
          return selectedItem
        }}
        rowTextForSelection={(item, index) => {
          return item
        }}
    />
         )
       }
       if(item =='Personal Accessories'){
        return(
          <SelectDropdown
            data={itemPersonal}
            buttonStyle={questionStyle.dropStyle}
              buttonTextStyle={{fontFamily:"Pacifico-Regular",
              color:"grey",
              fontSize:15
          }}
              dropdownStyle={{backgroundColor:"white",
              borderRadius:10,
          }}
          defaultButtonText='Choose personal belonging item'

            onSelect={(selectedItem, index) => {
              setitem(selectedItem)
            }}
            buttonTextAfterSelection={(selectedItem, index) => {
              return selectedItem
            }}
            rowTextForSelection={(item, index) => {
              return item
            }}
          />
        )
      }
      if(item =='Muscial Accessories'){
        return(
          <SelectDropdown
            data={itemMusical}
            buttonStyle={questionStyle.dropStyle}

              buttonTextStyle={{fontFamily:"Pacifico-Regular",
              color:"grey",
              fontSize:15
          }}
              dropdownStyle={{backgroundColor:"white",
              borderRadius:10,
          }}
            onSelect={(selectedItem, index) => {
              setitem(selectedItem)
            }}
            defaultButtonText='Choose Musical item'
            buttonTextAfterSelection={(selectedItem, index) => {
              return selectedItem
            }}
            rowTextForSelection={(item, index) => {
              return item
            }}
          />
        )
      } 
}  
    

   function alertItem(){
     if(itemCategory!='' && items!=''){
       
        return(
          ToastAndroid.showWithGravityAndOffset(selectedCategory_item.current+
            " items list added",
            ToastAndroid.CENTER,
            ToastAndroid.LONG,
            0,
            200  
          )
       )
      } 
   }
   
        return ( 
<LinearGradient style={questionStyle.homecontainer}colors={['#CFDEF3', '#E0EAFC']}> 
<ScrollView> 
       <View style={questionStyle.imageContainer} >
          <Image
          style={questionStyle.logo}
          source={require('../../assets/pictures/registeredItem.png')}
          />
          </View>
          <View style={questionStyle.textContainer} >
          <Text style={questionStyle.loginText}>Addtional questions</Text>
          </View>
      
 <View style={questionStyle.inputContainer}>
 
        <SelectDropdown
    data={Category}
    buttonStyle={{backgroundColor:"white",
    borderRadius:20,
    width:270,
    height:45, 
    marginTop:20, 
     
    }}
    buttonTextStyle={{fontFamily:"Pacifico-Regular",
    color:"grey",
    fontSize:15
}}
    dropdownStyle={{backgroundColor:"white",
    borderRadius:10,
}}
    defaultButtonText='Choose Category'

    onSelect={(selectedItem, index) => {
      setitemCategory(selectedItem) 
      selectedCategory_item.current=selectedItem
      alertItem()
      
    }}
    
    buttonTextAfterSelection={(selectedItem, index) => {
        return selectedItem
    }}
    rowTextForSelection={(item, index) => {
        return item
    }}
/>
{
  major(itemCategory) 
}

{select(items)}
</View>
  <TouchableOpacity 
              style={questionStyle.regButton}
              onPress={()=> 
                {storing_questions()}}
            >
              <Text style={questionStyle.regBText}>Register</Text>
            </TouchableOpacity>

</ScrollView>
</LinearGradient>

    );
  }
 
  export default questionsItem;


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source