reactjs - How to form a uri string in Javascript or in React Native? -

when hardcode username , password in uri works fine, webview opens required page , logs user in, when try append variables uri not work, gives error in login , credentials wrong.

hardcoded , works fine:

import react, { component } 'react'; import { webview,asyncstorage } 'react-native';  export default class test extends component {     async getusername(){ var username; try { username = await asyncstorage.getitem('username'); console.log('username'+username); return username;  } catch (error) { // error retrieving data username =""; console.log('username'+username); return username; }  }  async getpassword(){ var password; try { password = await asyncstorage.getitem('password'); console.log('password'+password); return password; } catch (error) { // error retrieving data password=""; return password; } } render() {  let pic = {    uri: 'http://www.userlogin.php?username=react&password=react@123'     }; return (    <webview     automaticallyadjustcontentinsets={false}     scalespagetofit={false}     source={{uri:pic.uri}}   /> ); 

used variables not work:

    import react, { component } 'react';     import { webview,asyncstorage } 'react-native';      export default class test extends component {     async getusername(){     var username;     try {     username = await asyncstorage.getitem('username');     console.log('username'+username);     return username;      } catch (error) {     // error retrieving data     username ="";     console.log('username'+username);     return username;     }      }      async getpassword(){     var password;     try {     password = await asyncstorage.getitem('password');     console.log('password'+password);     return password;     } catch (error) {     // error retrieving data     password="";     return password;     }     }     render() {     var usr=this.getusername();     var pass=this.getpassword();     let pic = {        uri: 'http://userlogin.php?username='+usr+'&password='+pass         };     return (        <webview         automaticallyadjustcontentinsets={false}         scalespagetofit={false}         source={{uri:pic.uri}}       />     );   } 

you have defined getusername async getusername() { ... }. means need await result, e.g. var usr = await this.getusername();. same true getpassword.

unfortunately don't think render function can async might have rethink approach bit. advice make component cater missing values (you can return null not render anything) until data available.

this question using ajax, asynchronous behaviour similar problem, maybe can out.