javascript - react-native: `this.state` is undefined in login function -

i'm having trouble accessing this.state in functions inside component.

always "undefined not object this.state.username, this.state.password" error

simpleform.js

import expo 'expo'; import react 'react'; import { stacknavigator, drawernavigator } 'react-navigation'; import app './app'; import registerform './register'; import { view, text, textinput, image, touchableopacity, asyncstorage, stylesheet } 'react-native'; import { yourrestapi } './constants/api3';  class simpleform extends react.component {   constructor(props) {     super(props);     this.state = { username: '', password: '', datas: '' };     this.login = this.login.bind(this, this.state.username, this.state.password);   }   componentwillmount() {     this.login();   }    registerscreen = () => {     this.props.navigation.navigate('register');   }      login() {     yourrestapi(this.state.username, this.state.password)       .then((response) => {         console.log(response.success);         this.setstate({ loading: false, datas: response });       });     if (this.state.datas.success === true) {       const info = this.state.datas.message;        asyncstorage.setitem('info', json.stringify(info));       this.props.navigation.navigate('secondscreen');     } else {       alert(this.state.datas.message);     }    }     render() {     const { navigate } = this.props.navigation;     return (       <view style={styles.container}>         <image source={require('./assets/img/sd.png')} style={styles.backgroundimage}>           <view style={styles.content}>             <text style={styles.logo}>toto prediction </text>             <view style={styles.inputcontainer}>                <textinput                 underlinecolorandroid='transparent' style={styles.input}                 onchangetext={(username) => this.setstate({ username })}                  value={this.state.username} placeholder='username'               />                 <textinput                 securetextentry underlinecolorandroid='transparent' style={styles.input}                 onchangetext={(password) => this.setstate({ password })}                  value={this.state.password} placeholder='password'               />              </view>             <touchableopacity onpress={this.login} style={styles.buttoncontainer}>               <text style={styles.buttontext}>login</text>             </touchableopacity>             this._onpressget.bind(this)             <touchableopacity onpress={this.registerscreen} style={styles.buttoncontainer}>               <text style={styles.buttontext}>register</text>             </touchableopacity>           </view>         </image>       </view>      );   } } const styles = stylesheet.create({   container: {     flex: 1,   },   backgroundimage: {     flex: 1,     alignself: 'stretch',     width: null,     justifycontent: 'center',    },   content: {     alignitems: 'center',   },   logo: {     color: 'white',     fontsize: 40,     fontstyle: 'italic',     fontweight: 'bold',     textshadowcolor: '#252525',     textshadowoffset: { width: 2, height: 2 },     textshadowradius: 15,     marginbottom: 20,   },   inputcontainer: {     margin: 20,     marginbottom: 0,     padding: 20,     paddingbottom: 10,     alignself: 'stretch',     borderwidth: 1,     bordercolor: '#fff',     backgroundcolor: 'rgba(255,255,255,0.2)',   },   input: {     fontsize: 16,     height: 40,     padding: 10,     marginbottom: 10,     backgroundcolor: 'rgba(255,255,255,1)',   },   buttoncontainer: {     margin: 20,     padding: 20,     backgroundcolor: 'blue',     borderwidth: 1,     bordercolor: '#fff',     backgroundcolor: 'rgba(255,255,255,0.6)',   },   buttontext: {     fontsize: 16,     fontweight: 'bold',     textalign: 'center',   }, }); const simpleapp = drawernavigator({   onescreen: { screen: simpleform },   secondscreen: { screen: app },   register: { screen: registerform }, }); expo.registerrootcomponent(simpleapp); 

api3.js

export function yourrestapi(username1, password1) {   fetchlogin(username1, password1); } function fetchlogin(username1, password1) {   const details = {     username: username1,     password: password1,   };   const formbody = object.keys(details).map(key => `${encodeuricomponent(key)}=${encodeuricomponent(details[key])}`).join('&');    fetch('https://*********************', {     method: 'post',     headers: {       accept: 'application/json',       'content-type': 'application/x-www-form-urlencoded',     },     body: formbody,   })     .then((response) => response.json())     .then((response) => {       console.log('requestappinstallation success ', response);       return response;     })     .done(); } 

i tried binding login this.state doesnt worked

i checked other questions nothing worked

any idea causing ?

in constructor replace binding statement below

constructor(props) {     super(props);     this.state = { username: '', password: '', datas: '' };     this.login = this.login.bind(this);   }