I'm using React to retrieve data from Firebase, but the userItem is not defined in my render function why

0
votes

I can see the data in console.log, but I couldn't pass it to render function with authenticated user information from firebase. Can anyone help please. I've tried many ways, when I use this.setState({..}) and use this.state.userItem in the return, but it tells me that the setState function is not defined. I've been stuck on this for two days. and this.state.userItem is not defined either and goes to code error.

`class AccInfo extends React.Component { state = { userItem: null }

  componentDidMount(){
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var db = firebase.firestore()
        db.collection('user').doc(user.uid)
            .get()
            .then(snapshot => {
                const userItem = snapshot.data()
                console.log(userItem.name)
                this.setState({userItem: userItem})
            })
            .catch(error => console.log(error))

      } else {

      }})
  }
  render() {
    return( <div>
              <p>{userItem.name}</p>//this is where I mess up
            </div>
          )
    }
  }
export default AccInfo;`
1
javascriptreactjsfirebase

1 Answers

1
votes

Use an Arrow (=>) function, it will preserve the this context. When using the Native function, it creates its own this, so when you do, this.setState({userItem: userItem}), the state of your component isn't updated.

firebase.auth().onAuthStateChanged((user) => {..// rest of the code..}