How to display fetched data from firebase?

How to / Third Party Tooling
1

Hi, I am new to Expo and React Native, I used following function to create firebase login which returns the data to CLI as well, I wanted to know that how I will display that data (id,email) on the app? looking for some help from you guys. Thank you!.

//Login Function
loginUser = (email, password) =>{

try{

firebase.auth().signInWithEmailAndPassword(email,password).then(function(user){
  console.log(user)
})

}
catch (error){
console.log(error.toString())
}

}

2

So it sounds like you need to fill in some gaps with respect to react knowledge. I’ll try to get you started…

  1. In the component where you are loading the login info, add some state like this:
class MyComponent extends React.Component{
    state= {
        id: "",
        email: ""
    }
    loginUser = (email, pw) => {/* your implementatiojn */}
    render(){
       //some render function that displays this.state.email and this.state.id, eg:
        return (
            <View>
                <Text>Email: {this.state.email}</Text>
                <Text>User id: {this.state.id}</Text>
            </View>
        );
    }
}
  1. in that callback function for firebase, add a setState call:
loginUser = (email, password) =>{
    const self = this;
    try{
        firebase.auth().signInWithEmailAndPassword(email,password).then(function(user){
                console.log(user);
                self.setState(() => ({
                    id: user.id, email: user.email
                });
        })
    }
    catch (error){
        console.log(error.toString())
    }
}

By calling setState you will cause a re-rendering of the component, and it will render with the new data.

2 Likes
3

Hi, Thanks for the help @vic616283 I tried your code but it does not work for me, This is what I have tried, any suggestions? Thanks!

//Login Function
loginUser = (email, password) =>{

  const self = this;

  try{


    firebase.auth().signInWithEmailAndPassword(email,password).then(function(user){
      console.log(user)

      self.setState(() => ({
        id: user.uid, email: user.email
    }))
      

    })

  }
  catch (error){
    console.log(error.toString())
  }


}
4

well what doesn’t work about it? What error do you get?

5

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.