javascript - setState of Undefined & User Authentication Error. Tried .bind(this). Tried fatpipe... Can't get it working -

i have 2 problems actually. first thing using componentwillmount or componentdidmount check user return asynchronous goes firebase check current user, , if statement not run there no user. tried solve promise, maybe understanding of promise isn't gave on , tried work inner code. substituted mount componentwillupdate seems run multiple times forcefully bypass error , check if state changed correctly.

this leads me second problem. setstate says undefined. i've read on stack overflow , tried use ".bind(this)" , fatpipe, neither working. perhaps i'm putting in wrong place or syntax wrong. can help?

import react, { component } 'react';  import search './search' import recipe './recipe' import fire '../fire' //import firebase 'firebase'  class favourites extends component {      constructor(props){         super(props);         this.state = {             recipes: []         }     }      componentdidupdate() {         var user = fire.auth().currentuser;          if(user) {             console.log('favorites: requesting favorites');             fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) {                 var recipes_obj = snapshot.val();                 let recipes = [];                 (let id in recipes_obj) {                     let recipe = recipes_obj[id];                     recipe.id = id;                     recipes.push(recipe);                     console.log("recipes: ", recipes)                 }                 console.log("recipes outside", recipes);                 this.setstate({ recipes: recipes });             });         } else {             console.log('favorites: no user')         }     }      render() {          return(             <div>                   <div classname="wrapper">                       <div classname="container">                         <div classname="row">                             <div classname="col s12">                                 {console.log(this.recipes.bind(this))}                                 {/*{this.recipes.map( recipe => {*/}                                     {/*return (*/}                                         {/*<div key={recipe.id}>*/}                                             {/*{recipe.title}*/}                                         {/*</div>*/}                                     {/*)*/}                                 {/*})}*/}                             </div>                         </div>                     </div>                      <div classname="container" id="search">                         <div classname="row">                             <div classname="col s12">                                 <recipe/>                             </div>                         </div>                     </div>                 </div>              </div>          )     }  }  export default favourites; 

here attempt 2 promise:

componentdidmount() {     var user = new promise ((resolve, reject) => {         resolve(fire.auth().currentuser).then(() => {             if(user) {                 console.log('favorites: requesting favorites');                 fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) {                     var recipes_obj = snapshot.val();                     let recipes = [];                     (let id in recipes_obj) {                         let recipe = recipes_obj[id];                         recipe.id = id;                         recipes.push(recipe);                         console.log("recipes: ", recipes)                     }                     console.log("recipes outside", recipes);                     this.setstate({ recipes: recipes });                 }.bind(this));             } else {                 console.log('favorites: no user')             }         })      }) 

does doing following help? (bind function in promise)

            fire.database().ref('/favourites/' + user.uid).once('value').then(function (snapshot) {             var recipes_obj = snapshot.val();             let recipes = [];             (let id in recipes_obj) {                 let recipe = recipes_obj[id];                 recipe.id = id;                 recipes.push(recipe);                 console.log("recipes: ", recipes)             }             console.log("recipes outside", recipes);             this.setstate({ recipes: recipes });         }.bind(this));