title: React Native - Calling a function
body: <p>I am new to <code>react-native</code> but have been playing around with creating a simple login UI. I have a Login component and then two seperate form components for <code>loginForm</code> and <code>forgotPasswordForm</code>.</p>
  
  <p>On my Login Component, I have a <code>renderForm</code> function that is trying to determine if we should show the <code>loginForm</code> or the <code>forgotPasswordForm</code>, which I assume would be based on <code>state</code>.</p>
  
  <p><strong>Login Component:</strong></p>
  
  <pre><code>export default class Login extends Component {
    state = { 'display': '' };
  
    // Render the content
    renderForm(){
      // What page should show?
      switch(this.state.display){
        case 'forgotPasswordForm':
          return &lt;ForgotPassword /&gt;;
        break;
        case 'loginForm':
          return &lt;LoginForm /&gt;;
        break;
        default:
          return &lt;LoginForm /&gt;;
        break;
      }
    }
  
    render() {
      return (
        &lt;KeyboardAvoidingView behavior="padding" style={styles.container}&gt;
  
          &lt;View style={styles.logoContainer}&gt;
            &lt;Image
              style={styles.logo}
              source={require('../../images/logo.png')}
            /&gt;
            &lt;Text style={styles.logoText}&gt;Behavior Tracking System&lt;/Text&gt;
          &lt;/View&gt;
  
          &lt;View style={styles.formContainer}&gt;
            {this.renderForm()}
          &lt;/View&gt;
  
        &lt;/KeyboardAvoidingView&gt;
      );
    }
  }
  </code></pre>
  
  <p>Here is my <code>LoginForm</code> which contains a link to the <code>forgotPasswordFunction</code>:</p>
  
  <pre><code>export default class LoginForm extends Component {
  
    forgotPasswordForm(){
      // Thought I could setState here so that the loginComponent would update and see the state and render the forgotPasswordForm instead
    }
  
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;StatusBar
            barStyle="light-content"
          /&gt;
          &lt;TextInput
            placeholder="username or email"
            placeholderTextColor="rgba(255,255,255,0.7)"
            returnKeyType="next"
            onSubmitEditing={() =&gt; this.passwordInput.focus()}
            keyboardType="email-address"
            autoCapitalize="none"
            autoCorrect={false}
            style={styles.input}
          /&gt;
          &lt;TextInput
            placeholder="password"
            placeholderTextColor="rgba(255,255,255,0.7)"
            secureTextEntry={true}
            returnKeyType="go"
            style={styles.input}
            ref={(input) =&gt; this.passwordInput = input}
          /&gt;
          &lt;TouchableOpacity style={styles.buttonContainer}&gt;
            &lt;Text style={styles.buttonText}&gt;LOGIN&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
          &lt;View style={styles.forgotPasswordContainer}&gt;
            &lt;Text style={styles.forgotPasswordText}&gt;Trouble logging in? &lt;/Text&gt;
            &lt;TouchableOpacity onPress={this.forgotPasswordForm()}&gt;
              &lt;Text style={styles.activeLink}&gt;Click Here.&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
      );
    }
  }
  </code></pre>
  
  <p>I may be just a little confused at where some of this code should be placed. I assume since the LoginComponent is including the form fields itself, thats where I would put the switch logic to determine if we show the <code>loginForm</code> or <code>forgotPasswordForm</code>.</p>
  
  <p>My issue is the <code>onClick</code> in the <code>loginForm</code> for the forgotPassword link. Not entirely sure how to get that to update the login component to switch forms.</p>
  
  <p><a href="https://i.stack.imgur.com/hmwSg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hmwSg.png" alt="enter image description here"></a></p>
  
  <p>My goal is that when the "Click Here" link is pressed, it loads the Password Recovery Field instead of the login fields.</p>