How to parse data from AsyncStorage to <Text>

Question

I am getting the following error when I get data from AsyncStorage:

Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})

async function setItem(key, value) {
  try {
    await AsyncStorage.setItem(key, value);
    console.log(key, value);
    return value;
  } catch (error) {
    // Handle errors here
  }
}

async function getItem(item) {
  try {
      const value = await AsyncStorage.getItem(item);;
      console.log(value);
      return value;
   } catch (error) {
     // Handle errors here
   }
}


setVar = setItem('username', 'Name');
getVar = getItem('username');

I am getting the error when outputting the result to:

<Text>{getVar}</Text>

When I check console I get the required output/everything is correct but I cannot render the text to the screen.

Any help or suggestions would be greatly appreciated.

Thanks.

The console log for getItem which is outputting Value is: Name This is what is confusing me so much as the correct output is shown in the console. — Roger
Name is being output to the log (Is there more info or a test you'd like me to run? Thanks). — Roger
Then I'm deleting my comments since I was wrong. But it must be related to that getItem is also async and getVar is null untill it completes. — bennygenel

Edgar Aroutiounian Edgar Aroutiounian · Accepted Answer · 2017-09-27T22:23:43

Cross posting from https://forums.expo.io/t/how-to-parse-data-from-asyncstorage-to-text/3417/4

Ah, your function getItem is giving back a Promise, remember that async keyword automatically makes the function return Promise. Hence the error message, can’t put the Promise object in

Suggest you:

Put the string you’ll use in state: state = {showThisText:''}

in render: {this.state.showThisText}

Then in async componentDidMount, get the data and do a this.setState({showThisText:YOUR_PULLED_STRING})

How to parse data from AsyncStorage to <Text>

2 Answers