AsyncStorage not finding variable - react-native

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}