Buttons that doesn't appear when render












0














I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display



Could you tell me why ?
Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.



firebase.initializeApp({
apiKey: XXXXXXX,
authDomain: XXXXXXX,
databaseURL: XXXXXXX,
projectId: XXXXXXX,
storageBucket: XXXXXXX,
messagingSenderId: XXXXXXX
});

export default class Login extends React.Component {

state = {
email:'',
password:'',
error:'',
loading:false
};

onLoginPress(){
this.state({error:'', loading:true});
firebase.auth().signInWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}

onSignUpPress(){
this.state({error:'', loading:true});
firebase.auth().createWithEmailAndPassword(email, password)
.then(()=>{
this.state({error:'',loading:false})
this.props.navigation.navigater('Home')
})
.catch (()=> {
this.state({error:"authentif faild", loading:false});
})
}

renderButtonOrLoading(){
if(this.state.loading) {
return <Text> Loading </Text>
}
return
<View>
<Text> Loading </Text>
<Button
onPress={this.onLoginPress.bind(this)}
title='Log In'/>
<Button
onPress={this.onSignUpPress.bind(this)}
title="Sign Up"/>
</View>
}

render() {
return(
<View>
<FormLabel>Email</FormLabel>
<FormInput onChangeText={email => this.setState({email})}/>
<FormLabel>Password</FormLabel>
<FormInput onChangeText={password => this.setState({password })}/>
{this.renderButtonOrLoading()}
</View>
)
}

}









share|improve this question





























    0














    I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display



    Could you tell me why ?
    Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.



    firebase.initializeApp({
    apiKey: XXXXXXX,
    authDomain: XXXXXXX,
    databaseURL: XXXXXXX,
    projectId: XXXXXXX,
    storageBucket: XXXXXXX,
    messagingSenderId: XXXXXXX
    });

    export default class Login extends React.Component {

    state = {
    email:'',
    password:'',
    error:'',
    loading:false
    };

    onLoginPress(){
    this.state({error:'', loading:true});
    firebase.auth().signInWithEmailAndPassword(email, password)
    .then(()=>{
    this.state({error:'',loading:false})
    this.props.navigation.navigater('Home')
    })
    .catch (()=> {
    this.state({error:"authentif faild", loading:false});
    })
    }

    onSignUpPress(){
    this.state({error:'', loading:true});
    firebase.auth().createWithEmailAndPassword(email, password)
    .then(()=>{
    this.state({error:'',loading:false})
    this.props.navigation.navigater('Home')
    })
    .catch (()=> {
    this.state({error:"authentif faild", loading:false});
    })
    }

    renderButtonOrLoading(){
    if(this.state.loading) {
    return <Text> Loading </Text>
    }
    return
    <View>
    <Text> Loading </Text>
    <Button
    onPress={this.onLoginPress.bind(this)}
    title='Log In'/>
    <Button
    onPress={this.onSignUpPress.bind(this)}
    title="Sign Up"/>
    </View>
    }

    render() {
    return(
    <View>
    <FormLabel>Email</FormLabel>
    <FormInput onChangeText={email => this.setState({email})}/>
    <FormLabel>Password</FormLabel>
    <FormInput onChangeText={password => this.setState({password })}/>
    {this.renderButtonOrLoading()}
    </View>
    )
    }

    }









    share|improve this question



























      0












      0








      0







      I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display



      Could you tell me why ?
      Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.



      firebase.initializeApp({
      apiKey: XXXXXXX,
      authDomain: XXXXXXX,
      databaseURL: XXXXXXX,
      projectId: XXXXXXX,
      storageBucket: XXXXXXX,
      messagingSenderId: XXXXXXX
      });

      export default class Login extends React.Component {

      state = {
      email:'',
      password:'',
      error:'',
      loading:false
      };

      onLoginPress(){
      this.state({error:'', loading:true});
      firebase.auth().signInWithEmailAndPassword(email, password)
      .then(()=>{
      this.state({error:'',loading:false})
      this.props.navigation.navigater('Home')
      })
      .catch (()=> {
      this.state({error:"authentif faild", loading:false});
      })
      }

      onSignUpPress(){
      this.state({error:'', loading:true});
      firebase.auth().createWithEmailAndPassword(email, password)
      .then(()=>{
      this.state({error:'',loading:false})
      this.props.navigation.navigater('Home')
      })
      .catch (()=> {
      this.state({error:"authentif faild", loading:false});
      })
      }

      renderButtonOrLoading(){
      if(this.state.loading) {
      return <Text> Loading </Text>
      }
      return
      <View>
      <Text> Loading </Text>
      <Button
      onPress={this.onLoginPress.bind(this)}
      title='Log In'/>
      <Button
      onPress={this.onSignUpPress.bind(this)}
      title="Sign Up"/>
      </View>
      }

      render() {
      return(
      <View>
      <FormLabel>Email</FormLabel>
      <FormInput onChangeText={email => this.setState({email})}/>
      <FormLabel>Password</FormLabel>
      <FormInput onChangeText={password => this.setState({password })}/>
      {this.renderButtonOrLoading()}
      </View>
      )
      }

      }









      share|improve this question















      I followed a video tutorial to add authentication in a React app with expo. The problem is the 2 buttons "Log In" and "Sign Up" does not display



      Could you tell me why ?
      Sometimes there is such problems when the element is not charged yet, but I don't understand why it would be the case here.



      firebase.initializeApp({
      apiKey: XXXXXXX,
      authDomain: XXXXXXX,
      databaseURL: XXXXXXX,
      projectId: XXXXXXX,
      storageBucket: XXXXXXX,
      messagingSenderId: XXXXXXX
      });

      export default class Login extends React.Component {

      state = {
      email:'',
      password:'',
      error:'',
      loading:false
      };

      onLoginPress(){
      this.state({error:'', loading:true});
      firebase.auth().signInWithEmailAndPassword(email, password)
      .then(()=>{
      this.state({error:'',loading:false})
      this.props.navigation.navigater('Home')
      })
      .catch (()=> {
      this.state({error:"authentif faild", loading:false});
      })
      }

      onSignUpPress(){
      this.state({error:'', loading:true});
      firebase.auth().createWithEmailAndPassword(email, password)
      .then(()=>{
      this.state({error:'',loading:false})
      this.props.navigation.navigater('Home')
      })
      .catch (()=> {
      this.state({error:"authentif faild", loading:false});
      })
      }

      renderButtonOrLoading(){
      if(this.state.loading) {
      return <Text> Loading </Text>
      }
      return
      <View>
      <Text> Loading </Text>
      <Button
      onPress={this.onLoginPress.bind(this)}
      title='Log In'/>
      <Button
      onPress={this.onSignUpPress.bind(this)}
      title="Sign Up"/>
      </View>
      }

      render() {
      return(
      <View>
      <FormLabel>Email</FormLabel>
      <FormInput onChangeText={email => this.setState({email})}/>
      <FormLabel>Password</FormLabel>
      <FormInput onChangeText={password => this.setState({password })}/>
      {this.renderButtonOrLoading()}
      </View>
      )
      }

      }






      react-native






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 19 at 12:08









      Hardik

      19829




      19829










      asked Nov 19 at 11:02









      Freddlow

      499




      499
























          3 Answers
          3






          active

          oldest

          votes


















          1














          I believe its because you are missing () on your return



           renderButtonOrLoading(){
          if(this.state.loading) {
          return <Text> Loading </Text>
          }
          return (
          <View>
          <Text> Loading </Text>
          <Button
          onPress={this.onLoginPress.bind(this)}
          title='Log In'/>
          <Button
          onPress={this.onSignUpPress.bind(this)}
          title="Sign Up"/>
          </View>
          )
          }





          share|improve this answer





























            2














            Return the login in and sign up button view in a Round brackets



            return (
            <View>
            <Button
            onPress={this.onLoginPress.bind(this)}
            title='Log In'/>
            <Button
            onPress={this.onSignUpPress.bind(this)}
            title="Sign Up"/>
            </View>
            )





            share|improve this answer





























              2














              I think you have missed to add round brackets for return method.



              renderButtonOrLoading(){
              if(this.state.loading) {
              return <Text> Loading </Text>
              }
              return (
              <View>
              <Text> Loading </Text>
              <Button
              onPress={this.onLoginPress.bind(this)}
              title='Log In'/>
              <Button
              onPress={this.onSignUpPress.bind(this)}
              title="Sign Up"/>
              </View>
              )
              }





              share|improve this answer





















                Your Answer






                StackExchange.ifUsing("editor", function () {
                StackExchange.using("externalEditor", function () {
                StackExchange.using("snippets", function () {
                StackExchange.snippets.init();
                });
                });
                }, "code-snippets");

                StackExchange.ready(function() {
                var channelOptions = {
                tags: "".split(" "),
                id: "1"
                };
                initTagRenderer("".split(" "), "".split(" "), channelOptions);

                StackExchange.using("externalEditor", function() {
                // Have to fire editor after snippets, if snippets enabled
                if (StackExchange.settings.snippets.snippetsEnabled) {
                StackExchange.using("snippets", function() {
                createEditor();
                });
                }
                else {
                createEditor();
                }
                });

                function createEditor() {
                StackExchange.prepareEditor({
                heartbeatType: 'answer',
                autoActivateHeartbeat: false,
                convertImagesToLinks: true,
                noModals: true,
                showLowRepImageUploadWarning: true,
                reputationToPostImages: 10,
                bindNavPrevention: true,
                postfix: "",
                imageUploader: {
                brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                allowUrls: true
                },
                onDemand: true,
                discardSelector: ".discard-answer"
                ,immediatelyShowMarkdownHelp:true
                });


                }
                });














                draft saved

                draft discarded


















                StackExchange.ready(
                function () {
                StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373220%2fbuttons-that-doesnt-appear-when-render%23new-answer', 'question_page');
                }
                );

                Post as a guest















                Required, but never shown

























                3 Answers
                3






                active

                oldest

                votes








                3 Answers
                3






                active

                oldest

                votes









                active

                oldest

                votes






                active

                oldest

                votes









                1














                I believe its because you are missing () on your return



                 renderButtonOrLoading(){
                if(this.state.loading) {
                return <Text> Loading </Text>
                }
                return (
                <View>
                <Text> Loading </Text>
                <Button
                onPress={this.onLoginPress.bind(this)}
                title='Log In'/>
                <Button
                onPress={this.onSignUpPress.bind(this)}
                title="Sign Up"/>
                </View>
                )
                }





                share|improve this answer


























                  1














                  I believe its because you are missing () on your return



                   renderButtonOrLoading(){
                  if(this.state.loading) {
                  return <Text> Loading </Text>
                  }
                  return (
                  <View>
                  <Text> Loading </Text>
                  <Button
                  onPress={this.onLoginPress.bind(this)}
                  title='Log In'/>
                  <Button
                  onPress={this.onSignUpPress.bind(this)}
                  title="Sign Up"/>
                  </View>
                  )
                  }





                  share|improve this answer
























                    1












                    1








                    1






                    I believe its because you are missing () on your return



                     renderButtonOrLoading(){
                    if(this.state.loading) {
                    return <Text> Loading </Text>
                    }
                    return (
                    <View>
                    <Text> Loading </Text>
                    <Button
                    onPress={this.onLoginPress.bind(this)}
                    title='Log In'/>
                    <Button
                    onPress={this.onSignUpPress.bind(this)}
                    title="Sign Up"/>
                    </View>
                    )
                    }





                    share|improve this answer












                    I believe its because you are missing () on your return



                     renderButtonOrLoading(){
                    if(this.state.loading) {
                    return <Text> Loading </Text>
                    }
                    return (
                    <View>
                    <Text> Loading </Text>
                    <Button
                    onPress={this.onLoginPress.bind(this)}
                    title='Log In'/>
                    <Button
                    onPress={this.onSignUpPress.bind(this)}
                    title="Sign Up"/>
                    </View>
                    )
                    }






                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 19 at 11:32









                    kivul

                    447112




                    447112

























                        2














                        Return the login in and sign up button view in a Round brackets



                        return (
                        <View>
                        <Button
                        onPress={this.onLoginPress.bind(this)}
                        title='Log In'/>
                        <Button
                        onPress={this.onSignUpPress.bind(this)}
                        title="Sign Up"/>
                        </View>
                        )





                        share|improve this answer


























                          2














                          Return the login in and sign up button view in a Round brackets



                          return (
                          <View>
                          <Button
                          onPress={this.onLoginPress.bind(this)}
                          title='Log In'/>
                          <Button
                          onPress={this.onSignUpPress.bind(this)}
                          title="Sign Up"/>
                          </View>
                          )





                          share|improve this answer
























                            2












                            2








                            2






                            Return the login in and sign up button view in a Round brackets



                            return (
                            <View>
                            <Button
                            onPress={this.onLoginPress.bind(this)}
                            title='Log In'/>
                            <Button
                            onPress={this.onSignUpPress.bind(this)}
                            title="Sign Up"/>
                            </View>
                            )





                            share|improve this answer












                            Return the login in and sign up button view in a Round brackets



                            return (
                            <View>
                            <Button
                            onPress={this.onLoginPress.bind(this)}
                            title='Log In'/>
                            <Button
                            onPress={this.onSignUpPress.bind(this)}
                            title="Sign Up"/>
                            </View>
                            )






                            share|improve this answer












                            share|improve this answer



                            share|improve this answer










                            answered Nov 19 at 11:32









                            Abinesh Joyel

                            1,0221511




                            1,0221511























                                2














                                I think you have missed to add round brackets for return method.



                                renderButtonOrLoading(){
                                if(this.state.loading) {
                                return <Text> Loading </Text>
                                }
                                return (
                                <View>
                                <Text> Loading </Text>
                                <Button
                                onPress={this.onLoginPress.bind(this)}
                                title='Log In'/>
                                <Button
                                onPress={this.onSignUpPress.bind(this)}
                                title="Sign Up"/>
                                </View>
                                )
                                }





                                share|improve this answer


























                                  2














                                  I think you have missed to add round brackets for return method.



                                  renderButtonOrLoading(){
                                  if(this.state.loading) {
                                  return <Text> Loading </Text>
                                  }
                                  return (
                                  <View>
                                  <Text> Loading </Text>
                                  <Button
                                  onPress={this.onLoginPress.bind(this)}
                                  title='Log In'/>
                                  <Button
                                  onPress={this.onSignUpPress.bind(this)}
                                  title="Sign Up"/>
                                  </View>
                                  )
                                  }





                                  share|improve this answer
























                                    2












                                    2








                                    2






                                    I think you have missed to add round brackets for return method.



                                    renderButtonOrLoading(){
                                    if(this.state.loading) {
                                    return <Text> Loading </Text>
                                    }
                                    return (
                                    <View>
                                    <Text> Loading </Text>
                                    <Button
                                    onPress={this.onLoginPress.bind(this)}
                                    title='Log In'/>
                                    <Button
                                    onPress={this.onSignUpPress.bind(this)}
                                    title="Sign Up"/>
                                    </View>
                                    )
                                    }





                                    share|improve this answer












                                    I think you have missed to add round brackets for return method.



                                    renderButtonOrLoading(){
                                    if(this.state.loading) {
                                    return <Text> Loading </Text>
                                    }
                                    return (
                                    <View>
                                    <Text> Loading </Text>
                                    <Button
                                    onPress={this.onLoginPress.bind(this)}
                                    title='Log In'/>
                                    <Button
                                    onPress={this.onSignUpPress.bind(this)}
                                    title="Sign Up"/>
                                    </View>
                                    )
                                    }






                                    share|improve this answer












                                    share|improve this answer



                                    share|improve this answer










                                    answered Nov 19 at 11:46









                                    Poonam

                                    814




                                    814






























                                        draft saved

                                        draft discarded




















































                                        Thanks for contributing an answer to Stack Overflow!


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.





                                        Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                        Please pay close attention to the following guidance:


                                        • Please be sure to answer the question. Provide details and share your research!

                                        But avoid



                                        • Asking for help, clarification, or responding to other answers.

                                        • Making statements based on opinion; back them up with references or personal experience.


                                        To learn more, see our tips on writing great answers.




                                        draft saved


                                        draft discarded














                                        StackExchange.ready(
                                        function () {
                                        StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373220%2fbuttons-that-doesnt-appear-when-render%23new-answer', 'question_page');
                                        }
                                        );

                                        Post as a guest















                                        Required, but never shown





















































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown

































                                        Required, but never shown














                                        Required, but never shown












                                        Required, but never shown







                                        Required, but never shown







                                        Popular posts from this blog

                                        Cypress Hill

                                        what are some tips for doing well in the interview? [on hold]

                                        How does a super-power salesman not get shut down for legal reasons?