reactjs - creating a login component which will show login error -

i creating login component show login error. don't know how bring errors array _onsubmit function loginform

here code code.

import react, { component } 'react'; import split 'grommet/components/split'; import section 'grommet/components/section'; import sidebar 'grommet/components/sidebar'; import loginform 'grommet/components/loginform'; //import logo './logo'; import firebase 'firebase'; export default class login extends component {    constructor() {     super();     this._onsubmit = this._onsubmit.bind(this);     this._onresponsive = this._onresponsive.bind(this);     this.state = {responsive: 'multiple',errors:[]};   }    _onsubmit(fields) {       firebase.auth().signinwithemailandpassword(fields.username, fields.password).catch(function(error) {       // handle errors here.       var errorcode = error.code;       var errormessage = error.message;       var errors = [];        errors.push(errorcode);       errors.push(errormessage);       console.log(errors);         // how bring errors here ??????     });   }    _onresponsive(responsive) {     this.setstate({responsive: responsive});   }    render() {      var image;     if ('multiple' === this.state.responsive) {       image = <section full={true} pad="none" texture="url(img/grafitti.jpg)" />;     }       return (       <split flex="left" separator={true} onresponsive={this._onresponsive}>         {image}         <sidebar justify="center" align="center" pad="medium" size="large">           <loginform              title="ferret"             onsubmit={this._onsubmit}             errors={??????} />         </sidebar>       </split>     );   } } 

can give guide? thanks!!!

the issue here creating closure when introduce function within .catch() handler.

you correctly binding this _onsubmit function, within closure created function() {}, this not bound outer scope.

you have option of using arrow function, not create lexical this:

firebase   .auth()   .signinwithemailandpassword(fields.username, fields.password)   .catch((error) => {     ...     // works since arrow function not create new lexical     this.setstate({})   }); 

or, can bind outer this (the 1 expecting have setstate() function) inner closure:

firebase   .auth()   .signinwithemailandpassword(fields.username, fields.password)   .catch(function(error) {     this.setstate({}) // bound outer   }.bind(this));