React-Native = Invariant Violation: Maximum update depth exceeded

Question

I have this error, and i didn't have it before : here is the image of the error Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

This error is located at: in Connect (at LoginForm.js:75)

render() {
const { inputStyle, containerStylePass, containerStyleIdent, barStyle, textInputStyle } = styles;

return (
   <View>
    <View>{/* all the password form*/}
      <View style={containerStylePass}>
      icon
        <Text style={inputStyle}>Mot de passe</Text>
      </View>
      <TextInput
        secureTextEntry
        autoCorrect={false}
        style={textInputStyle}
      />
      <View style={barStyle} />
    </View>

    <View>
      <Connect />
    </View>
  </View>

I don't know why is an error, can anyone help?

here is my code :

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

class Connect extends Component {

  render() {
    return (
      <TouchableOpacity onPress={this.setState({ butPressed: true })}>
        <LinearGradient
          colors={['#56EDFF', '#42F4A0']}
          start={{ x: 0.0, y: 1.0 }} end={{ x: 1.0, y: 1.0 }}
        >
          <Text style={textStyle}>
            Se connecter
          </Text>;
        </LinearGradient>
      </TouchableOpacity>
    );
  }
}

Answer 1

try:

<TouchableOpacity onPress={() => this.setState({ butPressed: true })}>

instead of

<TouchableOpacity onPress={this.setState({ butPressed: true })}>

Assigning {this.setState} to onPress without arrow function cause to render over and over again because setState casing the component to render again and then it comes again to the assignment of onPress = {}. Using arrow function instead causing to assign a function so the setState is actually doesn't happen until the function is activated. (only when onPress is activated)

Answer 2

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.