'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 |
|---|
