AsyncStorage not finding variable

Question

I'm sure its a stupid mistake somewhere but when I switch between class component to functional (to learn/understand how state works in both of these) I kind of miss the logic sometimes (with this.props etc). (home.js navigates to the page called addDiary.js) I'm not finished with the async logic/code but don't understand why I get the error "cant find variable: diary" at this point, thank you

Home.js

const Home = ({navigation}) => {
    const [refreshing, setRefreshing] = useState(false);
        const [diary, setDiary] = useState(null)

whenRefresh = async () => {
try{
  setRefreshing(true);
  const diary =  await AsyncStorage.getItem('diary')
  setDiary(JSON.parse('diary'))
  setRefreshing(false)}
  catch (error) {console.log(error)}
} 

    
    return(
          <View style={styles.home}>

                <ScrollView 
                    refreshControl={
                    <RefreshControl 
                    refreshing={refreshing}
                    onRefresh={whenRefresh}/>}
                    style={styles.body}>

                    {diary ? <ListItem
                    title={diary.title}
                    subtitle="test"
                    onPress={()=>{console.log("listitem pressed")}}
                    /> : null}

addDiary.js

const AddDiary = () => {


   const [title, setTitle] = useState()
    const [body, setBody] = useState()
    
const submit = async () => {
    const diary = {title, body}
    await AsyncStorage.setItem('diary', JSON.stringify(diary))
    navigation.goBack()
}


        return(
<SafeAreaView style={styles.home}>
    <View style={styles.group}>
                <Text style={styles.label}>Title:</Text>
                <TextInput
                placeholder="title"
                style={styles.titleInput}
                onChangeText={setTitle}
                value={title}
                />
    </View>

    <View style={[styles.group, {flex:1}]}>
                <Text style={styles.label}>Body:</Text>
                <TextInput
                placeholder="title"
                style={[styles.titleInput, {height: 300}]}
                onChangeText={setBody}
                value={body}
                />
    </View>

                <Button
                name="check-circle" 
                size={50} 
                color="black" 
                onPress={submit}
                />


</SafeAreaView>
        )
}

Answer 1

const submit = async () => {
    const diary = {title, body}
    await AsyncStorage.setItem('diary',JSON.stringify(diary))
    
}

Change your submit function to this. and it should work fine

const Home = ({navigation}) => {
const [refreshing, setRefreshing] = useState(false);
const [diary, setDiary] = useState(null)
whenRefresh = async () => {
  setRefreshing(true);
  const diary =  await AsyncStorage.getItem('diary')
  setDiary(JSON.parse('diary'))
  setRefreshing(false)

}

return(
      <View style={styles.home}>

            <ScrollView 
                refreshControl={
                <RefreshControl 
                refreshing={refreshing}
                onRefresh={whenRefresh}/>}
                style={styles.body}>

                {diary ? <ListItem
                title={diary.title}
                subtitle="test"
                onPress={()=>{console.log("listitem pressed")}}
                /> : null}