CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlist
Abdullah Ajmal
Abdullah Ajmal

Reputation: 463

Getting too many re-renders error in react native

I'm trying to show a FlatList, which is initially hidden, when the user clicks on a TextInput, but I'm getting an error saying that there are too many re-renders, take a look at the code:

const [state, setState] = useState ({
    ...
    showFlatList: false,
})

return (
    <ImageBackground source = {enterInfoBackGroundImage} style = {styles.container}>
        <SafeAreaView>
            <View style = {styles.backgroundArea}>

                <TextInput style = {styles.inputText} 
                    onFocus = {setState({showFlatList: true})}
                    autoCapitalize='characters'
                    placeholder = {'MAKE'}
                    placeholderTextColor = {'#B2B2B2'}
                    onChangeText = {text => setState({...state, companyName: text })}
                    value = {state.make}
                />

                {state.showFlatList && <FlatList
                    style = {styles.tableView}
                    data = {make}
                    keyExtractor = {(item) => item.id}
        
                    renderItem = {({ item }) => (
                        <TouchableOpacity style = {styles.tableViewItem} onPress = {() => {
                            console.log(item.make, item.id)
                        }}>
                
                            <Text style = {styles.searchBarText}>{item.make}</Text>
                        </TouchableOpacity>
                    )}
                />}
            </View>
        </SafeAreaView>
    </ImageBackground>
);

I'm only getting this error when I put {setState({showFlatList: true})} on onFocus, but when I put that inside onPress inside the TouchableOpacity, it worked, any kind of feedback is appreciated! :)

Upvotes: 0

Views: 292

Answers (1)

bas
bas

Reputation: 15722

The problem is how you call setState on the onFocus property of your TextInput.

It should look more like this:

<TextInput
  onFocus={() => {
    setState({showFlatList: true});
  }}
  // ...
/>

So the same way you handled your TouchableOpacity's onPress.

Upvotes: 2

Related Questions