React Native: TypeError: undefined is not a function (evaluating 'this.props.recipes.map')

Question

I'm trying to make a React Native recipe app in which you can save your recipes locally, but I get the following error when I added AsyncStorage: Screenshot

Here is my code:

App.js: https://gist.github.com/anonymous/4e83b8c5ec797278c8a642dfca60c622

Recipes.js: https://gist.github.com/anonymous/c894357b3413f37dbf856c98ef6b93f4

Answer 1

the AsyncStorage.getItem is async, so your this.state.recipes is null. You should change your componentWillMount() to

async componentWillMount(){
  let recipes = await AsyncStorage.getItem('recipes);
  if (recipes) {
     this.setState({ recipes });
  }
});

And you should make sure your this.state.recipes is an array. Hope it helps!