How to use setState() inside compoentWillMount ReactJS

Question

I'm new to ReactJs. I'm trying to create a firebase app using it. So in componentWillMount I'm checking if the user is logined or not and setting the state boolean value according to that

  componentWillMount() {
    var config = {...};
    Firebase.initializeApp(config)

    Firebase.auth().onAuthStateChanged(function(user){
      if(user){
        console.log("User logined");
        this.setState({
          isLogined : true
        })
      }else{
        console.log("User isn't logined");
        this.setState({
          isLogined : false
        })
      }
    })

  }

But it's showing setState() is not a function.

index.js:2178 TypeError: this.setState is not a function
    at Object.next (App.js:31)
    at index.cjs.js:1353
    at index.cjs.js:1457

Need Help :(

AnilRedshift · Accepted Answer · 2018-05-18T17:18:45.830

3

Few things:

1) You'll want to move this code to componentDidMount. componentWillMount is deprecated. Here's some more info as to why you should prefer componentDidMount

2) Change your onAuthStateChanged callback to be an arrow function.

componentDidMount() {
var config = {...};
Firebase.initializeApp(config)

Firebase.auth().onAuthStateChanged((user) => {
  if(user){
    console.log("User logined");
    this.setState({
      isLogined : true
    })
  }else{
    console.log("User isn't logined");
    this.setState({
      isLogined : false
    })
  }
})

}

edited May 18 '18 at 17:18

answered May 18 '18 at 17:16

AnilRedshift

7,937
7
35
59

I just copy pasted that from Firebase docs. I'll keep that in mind. Tysm – Bucky May 18 '18 at 17:18
1

@Kim can you link the documentation? We should try to get it updated – AnilRedshift May 18 '18 at 17:21
Nope.. it's firebase's documentation for javascript projects. It was my fault :( – Bucky May 18 '18 at 17:47

score 2 · Answer 2 · answered May 18 '18 at 17:14

2

The problem comes from:

Firebase.auth().onAuthStateChanged(function(user){

this is not refferring to the react component. Instead, try:

Firebase.auth().onAuthStateChanged((user) => {

answered May 18 '18 at 17:14

bthe0

1,354
2
13
25

How to use setState() inside compoentWillMount ReactJS

2 Answers2